@festo-ui/angular 3.1.0-pre-20220203.2 → 3.1.0-pre-20220217.1

package/fesm2015/{festo-ui-angular.js → festo-ui-angular.mjs}

@@ -38,16 +38,11 @@ class ButtonComponent {
         }
     }
 }
-ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: ButtonComponent, selector: "fng-button", inputs: { text: "text", icon: "icon", disabled: "disabled", primary: "primary", iconOnly: "iconOnly", large: "large" }, outputs: { fngClick: "fngClick" }, queries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<button (click)=\"onClick($event)\"\n  [ngClass]=\"{\n    'fwe-btn': true,\n    'fng-button': true,\n    'fwe-btn-icon': iconOnly,\n    'fwe-disabled': disabled,\n    'fwe-btn-hero': primary,\n    'fwe-btn-lg': large\n  }\"\n  [disabled]=\"disabled\">\n  <i *ngIf=\"icon\" [class]=\"'fwe-icon fwe-icon-' + icon\"></i>\n  <div *ngIf=\"!iconOnly\" class=\"fng-button-text\">\n    <ng-content></ng-content>\n    <span *ngIf=\"!content\">{{text}}</span>\n  </div>\n</button>", styles: [".fng-button .fng-button-text{margin:-1px 0 1px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ButtonComponent, decorators: [{
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ButtonComponent, selector: "fng-button", inputs: { text: "text", icon: "icon", disabled: "disabled", primary: "primary", iconOnly: "iconOnly", large: "large" }, outputs: { fngClick: "fngClick" }, queries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<button\n  (click)=\"onClick($event)\"\n  [ngClass]=\"{\n    'fwe-btn': true,\n    'fng-button': true,\n    'fwe-btn-icon': iconOnly,\n    'fwe-disabled': disabled,\n    'fwe-btn-hero': primary,\n    'fwe-btn-lg': large\n  }\"\n  [disabled]=\"disabled\"\n>\n  <i *ngIf=\"icon\" [class]=\"'fwe-icon fwe-icon-' + icon\"></i>\n  <div *ngIf=\"!iconOnly\" class=\"fng-button-text\">\n    <ng-content></ng-content>\n    <span *ngIf=\"!content\">{{ text }}</span>\n  </div>\n</button>\n", styles: [".fng-button .fng-button-text{margin:-1px 0 1px}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-button',
-                    templateUrl: './button.component.html',
-                    styleUrls: ['./button.component.scss'],
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-button', encapsulation: ViewEncapsulation.None, template: "<button\n  (click)=\"onClick($event)\"\n  [ngClass]=\"{\n    'fwe-btn': true,\n    'fng-button': true,\n    'fwe-btn-icon': iconOnly,\n    'fwe-disabled': disabled,\n    'fwe-btn-hero': primary,\n    'fwe-btn-lg': large\n  }\"\n  [disabled]=\"disabled\"\n>\n  <i *ngIf=\"icon\" [class]=\"'fwe-icon fwe-icon-' + icon\"></i>\n  <div *ngIf=\"!iconOnly\" class=\"fng-button-text\">\n    <ng-content></ng-content>\n    <span *ngIf=\"!content\">{{ text }}</span>\n  </div>\n</button>\n", styles: [".fng-button .fng-button-text{margin:-1px 0 1px}\n"] }]
         }], propDecorators: { text: [{
                 type: Input
             }], icon: [{
@@ -77,16 +72,11 @@ class LinkButtonComponent {
         this.fngClick.emit(event);
     }
 }
-LinkButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: LinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LinkButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: LinkButtonComponent, selector: "fng-link-button", inputs: { text: "text", icon: "icon", disabled: "disabled", iconOnly: "iconOnly" }, outputs: { fngClick: "fngClick" }, queries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<button (click)=\"onClick($event)\"\n  [ngClass]=\"{\n    'fwe-btn': true,\n    'fwe-btn-link': true,\n    'fwe-disabled': disabled\n  }\" [disabled]=\"disabled\">\n  <i *ngIf=\"icon\" [class]=\"'fwe-icon fwe-icon-' + icon\"></i>\n  <ng-content *ngIf=\"!iconOnly\"></ng-content>\n  <span *ngIf=\"!content\">{{text}}</span>\n</button>", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: LinkButtonComponent, decorators: [{
+LinkButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LinkButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LinkButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: LinkButtonComponent, selector: "fng-link-button", inputs: { text: "text", icon: "icon", disabled: "disabled", iconOnly: "iconOnly" }, outputs: { fngClick: "fngClick" }, queries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<button\n  (click)=\"onClick($event)\"\n  [ngClass]=\"{\n    'fwe-btn': true,\n    'fwe-btn-link': true,\n    'fwe-disabled': disabled\n  }\"\n  [disabled]=\"disabled\"\n>\n  <i *ngIf=\"icon\" [class]=\"'fwe-icon fwe-icon-' + icon\"></i>\n  <ng-content *ngIf=\"!iconOnly\"></ng-content>\n  <span *ngIf=\"!content\">{{ text }}</span>\n</button>\n", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LinkButtonComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-link-button',
-                    templateUrl: './link-button.component.html',
-                    styleUrls: ['./link-button.component.scss'],
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-link-button', encapsulation: ViewEncapsulation.None, template: "<button\n  (click)=\"onClick($event)\"\n  [ngClass]=\"{\n    'fwe-btn': true,\n    'fwe-btn-link': true,\n    'fwe-disabled': disabled\n  }\"\n  [disabled]=\"disabled\"\n>\n  <i *ngIf=\"icon\" [class]=\"'fwe-icon fwe-icon-' + icon\"></i>\n  <ng-content *ngIf=\"!iconOnly\"></ng-content>\n  <span *ngIf=\"!content\">{{ text }}</span>\n</button>\n", styles: [""] }]
         }], propDecorators: { text: [{
                 type: Input
             }], icon: [{
@@ -108,15 +98,11 @@ class BreadcrumbComponent {
         this.navigate = new EventEmitter();
     }
 }
-BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: BreadcrumbComponent, selector: "fng-breadcrumb", inputs: { useRouterLink: "useRouterLink", locations: "locations" }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<div class=\"fwe-breadcrumb\">\n  <ng-container *ngFor=\"let location of locations; let i = index\">\n    <a *ngIf=\"useRouterLink\" class=\"fng-breadcrumb-location\" [routerLink]=\"location.url\">{{ location.label }}</a>\n    <a *ngIf=\"!useRouterLink\" class=\"fng-breadcrumb-location\" (click)=\"navigate.emit(location.url)\">{{ location.label }}</a>\n    <i class=\"fwe-icon fwe-icon-arrows-right-2\" *ngIf=\"i + 1 < locations.length\"></i>\n  </ng-container>\n</div>\n", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: BreadcrumbComponent, selector: "fng-breadcrumb", inputs: { useRouterLink: "useRouterLink", locations: "locations" }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<div class=\"fwe-breadcrumb\">\n  <ng-container *ngFor=\"let location of locations; let i = index\">\n    <a *ngIf=\"useRouterLink\" class=\"fng-breadcrumb-location\" [routerLink]=\"location.url\">{{ location.label }}</a>\n    <a *ngIf=\"!useRouterLink\" class=\"fng-breadcrumb-location\" (click)=\"navigate.emit(location.url)\">{{ location.label }}</a>\n    <i class=\"fwe-icon fwe-icon-arrows-right-2\" *ngIf=\"i + 1 < locations.length\"></i>\n  </ng-container>\n</div>\n", directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-breadcrumb',
-                    templateUrl: './breadcrumb.component.html',
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-breadcrumb', encapsulation: ViewEncapsulation.None, template: "<div class=\"fwe-breadcrumb\">\n  <ng-container *ngFor=\"let location of locations; let i = index\">\n    <a *ngIf=\"useRouterLink\" class=\"fng-breadcrumb-location\" [routerLink]=\"location.url\">{{ location.label }}</a>\n    <a *ngIf=\"!useRouterLink\" class=\"fng-breadcrumb-location\" (click)=\"navigate.emit(location.url)\">{{ location.label }}</a>\n    <i class=\"fwe-icon fwe-icon-arrows-right-2\" *ngIf=\"i + 1 < locations.length\"></i>\n  </ng-container>\n</div>\n" }]
         }], propDecorators: { useRouterLink: [{
                 type: Input
             }], locations: [{
@@ -130,16 +116,11 @@ class LoadingIndicatorComponent {
         this.size = 'large';
     }
 }
-LoadingIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: LoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadingIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: LoadingIndicatorComponent, selector: "fng-loading-indicator", inputs: { size: "size" }, ngImport: i0, template: "<div class=\"fng-waiting-container\">\n  <div class=\"fwe-waiting-indicator\"\n       [class.fwe-waiting-indicator-md]=\"size === 'medium'\"\n       [class.fwe-waiting-indicator-sm]=\"size === 'small'\">\n    <div class=\"fwe-waiting-circle-1\"></div>\n    <div class=\"fwe-waiting-circle-2\"></div>\n    <div class=\"fwe-waiting-circle-3\"></div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-waiting-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.fng-waiting-indicator{margin-bottom:16px}\n"], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
+LoadingIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LoadingIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoadingIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: LoadingIndicatorComponent, selector: "fng-loading-indicator", inputs: { size: "size" }, ngImport: i0, template: "<div class=\"fng-waiting-container\">\n  <div\n    class=\"fwe-waiting-indicator\"\n    [class.fwe-waiting-indicator-md]=\"size === 'medium'\"\n    [class.fwe-waiting-indicator-sm]=\"size === 'small'\"\n  >\n    <div class=\"fwe-waiting-circle-1\"></div>\n    <div class=\"fwe-waiting-circle-2\"></div>\n    <div class=\"fwe-waiting-circle-3\"></div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-waiting-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.fng-waiting-indicator{margin-bottom:16px}\n"], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LoadingIndicatorComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-loading-indicator',
-                    templateUrl: './loading-indicator.component.html',
-                    styleUrls: ['./loading-indicator.component.scss'],
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-loading-indicator', encapsulation: ViewEncapsulation.None, template: "<div class=\"fng-waiting-container\">\n  <div\n    class=\"fwe-waiting-indicator\"\n    [class.fwe-waiting-indicator-md]=\"size === 'medium'\"\n    [class.fwe-waiting-indicator-sm]=\"size === 'small'\"\n  >\n    <div class=\"fwe-waiting-circle-1\"></div>\n    <div class=\"fwe-waiting-circle-2\"></div>\n    <div class=\"fwe-waiting-circle-3\"></div>\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-waiting-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.fng-waiting-indicator{margin-bottom:16px}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }] } });
@@ -149,16 +130,11 @@ class ChipContainerComponent {
         this.large = false;
     }
 }
-ChipContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ChipContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChipContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: ChipContainerComponent, selector: "fng-chip-container", inputs: { large: "large" }, ngImport: i0, template: "<div class=\"fwe-chip-container\" [class.fwe-chip-container-lg]=large>\n  <ng-content></ng-content>\n</div>", styles: [""], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ChipContainerComponent, decorators: [{
+ChipContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChipContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChipContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ChipContainerComponent, selector: "fng-chip-container", inputs: { large: "large" }, ngImport: i0, template: "<div class=\"fwe-chip-container\" [class.fwe-chip-container-lg]=\"large\">\n  <ng-content></ng-content>\n</div>\n", styles: [""], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChipContainerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-chip-container',
-                    templateUrl: './chip-container.component.html',
-                    styleUrls: ['./chip-container.component.scss'],
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-chip-container', encapsulation: ViewEncapsulation.None, template: "<div class=\"fwe-chip-container\" [class.fwe-chip-container-lg]=\"large\">\n  <ng-content></ng-content>\n</div>\n", styles: [""] }]
         }], propDecorators: { large: [{
                 type: Input
             }] } });
@@ -180,16 +156,11 @@ class ChipComponent {
         this.large = false;
     }
 }
-ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: ChipComponent, selector: "fng-chip", inputs: { type: "type", selected: "selected", disabled: "disabled", icon: "icon", large: "large" }, ngImport: i0, template: "<div [ngClass]=\"{\n  'fwe-chip': true,\n  'fwe-selected': selected,\n  'fwe-disabled': disabled,\n  'fwe-chip-lg': large,\n  'fwe-category': type === ChipType.Category,\n  'fwe-filter': type === ChipType.Filter,\n  'fwe-readonly': type === ChipType.Readonly  \n}\">\n  <i *ngIf=\"icon\" [class]=\"'fwe-icon fwe-icon-' + icon\"></i>\n  <ng-content></ng-content>\n</div>", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ChipComponent, decorators: [{
+ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ChipComponent, selector: "fng-chip", inputs: { type: "type", selected: "selected", disabled: "disabled", icon: "icon", large: "large" }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'fwe-chip': true,\n    'fwe-selected': selected,\n    'fwe-disabled': disabled,\n    'fwe-chip-lg': large,\n    'fwe-category': type === ChipType.Category,\n    'fwe-filter': type === ChipType.Filter,\n    'fwe-readonly': type === ChipType.Readonly\n  }\"\n>\n  <i *ngIf=\"icon\" [class]=\"'fwe-icon fwe-icon-' + icon\"></i>\n  <ng-content></ng-content>\n</div>\n", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChipComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-chip',
-                    templateUrl: './chip.component.html',
-                    styleUrls: ['./chip.component.scss'],
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-chip', encapsulation: ViewEncapsulation.None, template: "<div\n  [ngClass]=\"{\n    'fwe-chip': true,\n    'fwe-selected': selected,\n    'fwe-disabled': disabled,\n    'fwe-chip-lg': large,\n    'fwe-category': type === ChipType.Category,\n    'fwe-filter': type === ChipType.Filter,\n    'fwe-readonly': type === ChipType.Readonly\n  }\"\n>\n  <i *ngIf=\"icon\" [class]=\"'fwe-icon fwe-icon-' + icon\"></i>\n  <ng-content></ng-content>\n</div>\n", styles: [""] }]
         }], propDecorators: { type: [{
                 type: Input
             }], selected: [{
@@ -222,9 +193,9 @@ class TableHeaderCellDirective {
         this.changeOrder.emit(this.fngTh);
     }
 }
-TableHeaderCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TableHeaderCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-TableHeaderCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.0", type: TableHeaderCellDirective, selector: "[fngTh]", inputs: { order: "order", fngTh: "fngTh", abbr: "abbr", colspan: "colspan", headers: "headers", rowspan: "rowspan", scope: "scope" }, outputs: { changeOrder: "changeOrder" }, host: { listeners: { "click": "onChangeOrder()" }, properties: { "class.fwe-table-order": "order != null", "class.fwe-active": "active", "class.fwe-table-order-descending": "orderDescending", "attr.abbr": "abbr", "attr.colspan": "colspan", "attr.headers": "headers", "attr.rowspan": "rowspan", "attr.scope": "scope" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TableHeaderCellDirective, decorators: [{
+TableHeaderCellDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TableHeaderCellDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+TableHeaderCellDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: TableHeaderCellDirective, selector: "[fngTh]", inputs: { order: "order", fngTh: "fngTh", abbr: "abbr", colspan: "colspan", headers: "headers", rowspan: "rowspan", scope: "scope" }, outputs: { changeOrder: "changeOrder" }, host: { listeners: { "click": "onChangeOrder()" }, properties: { "class.fwe-table-order": "order != null", "class.fwe-active": "active", "class.fwe-table-order-descending": "orderDescending", "attr.abbr": "abbr", "attr.colspan": "colspan", "attr.headers": "headers", "attr.rowspan": "rowspan", "attr.scope": "scope" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TableHeaderCellDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fngTh]',
@@ -264,17 +235,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
  */
 class StepperComponent {
 }
-StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: StepperComponent, selector: "fng-stepper", inputs: { steps: "steps", stepIndex: "stepIndex", error: "error" }, ngImport: i0, template: "<div class=\"fng-stepper\" [class.fng-stepper-error]=\"error\">\n  <div *ngFor=\"let step of steps; index as i; first as isFirst\"\n       class=\"fng-step-container\"\n       [class.fng-step-active]=\"i === stepIndex\"\n       [class.fng-step-done]=\"i < stepIndex\"\n       [class.fng-step-first]=\"isFirst\">\n    <div *ngIf=\"!isFirst\" class=\"fng-step-connector\"></div>\n    <div class=\"fng-step\">\n      <div *ngIf=\"i >= stepIndex\">{{i + 1}}</div>\n      <div class=\"fng-step-name fwe-d-none fwe-d-lg-block\">{{step.name}}</div>\n    </div>\n  </div>\n</div>\n", styles: [".fng-stepper{display:flex;width:80%;margin:auto;justify-content:center}.fng-stepper .fng-step-container{display:flex;flex-direction:row;flex:1}.fng-stepper .fng-step-container .fng-step{position:relative;border-radius:50%;border:1px solid #a3b2bc;color:#a3b2bc;width:24px;height:24px;font-size:14px;display:flex;align-items:center;justify-content:center;font-feature-settings:\"tnum\",\"lnum\",lining-nums tabular-nums diagonal-fractions ordinal;font-variant-numeric:lining-nums tabular-nums diagonal-fractions ordinal;transition:border-color .3s,background-color .3s,color .3s}.fng-stepper .fng-step-container .fng-step .fng-step-name{position:absolute;top:30px;left:50%;color:#a3b2bc;transform:translate(-50%);white-space:pre;transition:color .3s}.fng-stepper .fng-step-container .fng-step-connector{border-bottom:1px solid #a3b2bc;flex:1;height:50%;transition:border-color .3s}.fng-stepper .fng-step-container.fng-step-active .fng-step,.fng-stepper .fng-step-container.fng-step-done .fng-step{background:#0091DC;border-color:#0091dc;color:#fff}.fng-stepper .fng-step-container.fng-step-active .fng-step .fng-step-name,.fng-stepper .fng-step-container.fng-step-done .fng-step .fng-step-name{color:#0091dc}.fng-stepper .fng-step-container.fng-step-active .fng-step-connector,.fng-stepper .fng-step-container.fng-step-done .fng-step-connector{border-color:#0091dc}.fng-stepper .fng-step-container.fng-step-done .fng-step:before{content:\"\";position:absolute;border-left:1px solid white;border-bottom:1px solid white;top:6px;left:4px;width:14px;height:7px;transform:rotate(-45deg)}.fng-stepper .fng-step-container.fng-step-first{flex:0;flex-basis:24px}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-active .fng-step{background:#D00019;border-color:#d00019;color:#fff}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-active .fng-step .fng-step-name{color:#d00019}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-active .fng-step-connector{border-color:#a3b2bc}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-done .fng-step{background:#a3b2bc;border-color:#a3b2bc;color:#fff}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-done .fng-step .fng-step-name{color:#a3b2bc}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-done .fng-step-connector{border-color:#a3b2bc}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: StepperComponent, decorators: [{
+StepperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StepperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: StepperComponent, selector: "fng-stepper", inputs: { steps: "steps", stepIndex: "stepIndex", error: "error" }, ngImport: i0, template: "<div class=\"fng-stepper\" [class.fng-stepper-error]=\"error\">\n  <div\n    *ngFor=\"let step of steps; index as i; first as isFirst\"\n    class=\"fng-step-container\"\n    [class.fng-step-active]=\"i === stepIndex\"\n    [class.fng-step-done]=\"i < stepIndex\"\n    [class.fng-step-first]=\"isFirst\"\n  >\n    <div *ngIf=\"!isFirst\" class=\"fng-step-connector\"></div>\n    <div class=\"fng-step\">\n      <div *ngIf=\"i >= stepIndex\">{{ i + 1 }}</div>\n      <div class=\"fng-step-name fwe-d-none fwe-d-lg-block\">{{ step.name }}</div>\n    </div>\n  </div>\n</div>\n", styles: [".fng-stepper{display:flex;width:80%;margin:auto;justify-content:center}.fng-stepper .fng-step-container{display:flex;flex-direction:row;flex:1}.fng-stepper .fng-step-container .fng-step{position:relative;border-radius:50%;border:1px solid #a3b2bc;color:#a3b2bc;width:24px;height:24px;font-size:14px;display:flex;align-items:center;justify-content:center;font-feature-settings:\"tnum\",\"lnum\",lining-nums tabular-nums diagonal-fractions ordinal;font-variant-numeric:lining-nums tabular-nums diagonal-fractions ordinal;transition:border-color .3s,background-color .3s,color .3s}.fng-stepper .fng-step-container .fng-step .fng-step-name{position:absolute;top:30px;left:50%;color:#a3b2bc;transform:translate(-50%);white-space:pre;transition:color .3s}.fng-stepper .fng-step-container .fng-step-connector{border-bottom:1px solid #a3b2bc;flex:1;height:50%;transition:border-color .3s}.fng-stepper .fng-step-container.fng-step-active .fng-step,.fng-stepper .fng-step-container.fng-step-done .fng-step{background:#0091dc;border-color:#0091dc;color:#fff}.fng-stepper .fng-step-container.fng-step-active .fng-step .fng-step-name,.fng-stepper .fng-step-container.fng-step-done .fng-step .fng-step-name{color:#0091dc}.fng-stepper .fng-step-container.fng-step-active .fng-step-connector,.fng-stepper .fng-step-container.fng-step-done .fng-step-connector{border-color:#0091dc}.fng-stepper .fng-step-container.fng-step-done .fng-step:before{content:\"\";position:absolute;border-left:1px solid white;border-bottom:1px solid white;top:6px;left:4px;width:14px;height:7px;transform:rotate(-45deg)}.fng-stepper .fng-step-container.fng-step-first{flex:0;flex-basis:24px}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-active .fng-step{background:#d00019;border-color:#d00019;color:#fff}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-active .fng-step .fng-step-name{color:#d00019}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-active .fng-step-connector{border-color:#a3b2bc}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-done .fng-step{background:#a3b2bc;border-color:#a3b2bc;color:#fff}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-done .fng-step .fng-step-name{color:#a3b2bc}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-done .fng-step-connector{border-color:#a3b2bc}\n"], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-stepper',
-                    templateUrl: './stepper.component.html',
-                    styleUrls: ['./stepper.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-stepper', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fng-stepper\" [class.fng-stepper-error]=\"error\">\n  <div\n    *ngFor=\"let step of steps; index as i; first as isFirst\"\n    class=\"fng-step-container\"\n    [class.fng-step-active]=\"i === stepIndex\"\n    [class.fng-step-done]=\"i < stepIndex\"\n    [class.fng-step-first]=\"isFirst\"\n  >\n    <div *ngIf=\"!isFirst\" class=\"fng-step-connector\"></div>\n    <div class=\"fng-step\">\n      <div *ngIf=\"i >= stepIndex\">{{ i + 1 }}</div>\n      <div class=\"fng-step-name fwe-d-none fwe-d-lg-block\">{{ step.name }}</div>\n    </div>\n  </div>\n</div>\n", styles: [".fng-stepper{display:flex;width:80%;margin:auto;justify-content:center}.fng-stepper .fng-step-container{display:flex;flex-direction:row;flex:1}.fng-stepper .fng-step-container .fng-step{position:relative;border-radius:50%;border:1px solid #a3b2bc;color:#a3b2bc;width:24px;height:24px;font-size:14px;display:flex;align-items:center;justify-content:center;font-feature-settings:\"tnum\",\"lnum\",lining-nums tabular-nums diagonal-fractions ordinal;font-variant-numeric:lining-nums tabular-nums diagonal-fractions ordinal;transition:border-color .3s,background-color .3s,color .3s}.fng-stepper .fng-step-container .fng-step .fng-step-name{position:absolute;top:30px;left:50%;color:#a3b2bc;transform:translate(-50%);white-space:pre;transition:color .3s}.fng-stepper .fng-step-container .fng-step-connector{border-bottom:1px solid #a3b2bc;flex:1;height:50%;transition:border-color .3s}.fng-stepper .fng-step-container.fng-step-active .fng-step,.fng-stepper .fng-step-container.fng-step-done .fng-step{background:#0091dc;border-color:#0091dc;color:#fff}.fng-stepper .fng-step-container.fng-step-active .fng-step .fng-step-name,.fng-stepper .fng-step-container.fng-step-done .fng-step .fng-step-name{color:#0091dc}.fng-stepper .fng-step-container.fng-step-active .fng-step-connector,.fng-stepper .fng-step-container.fng-step-done .fng-step-connector{border-color:#0091dc}.fng-stepper .fng-step-container.fng-step-done .fng-step:before{content:\"\";position:absolute;border-left:1px solid white;border-bottom:1px solid white;top:6px;left:4px;width:14px;height:7px;transform:rotate(-45deg)}.fng-stepper .fng-step-container.fng-step-first{flex:0;flex-basis:24px}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-active .fng-step{background:#d00019;border-color:#d00019;color:#fff}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-active .fng-step .fng-step-name{color:#d00019}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-active .fng-step-connector{border-color:#a3b2bc}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-done .fng-step{background:#a3b2bc;border-color:#a3b2bc;color:#fff}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-done .fng-step .fng-step-name{color:#a3b2bc}.fng-stepper.fng-stepper-error .fng-step-container.fng-step-done .fng-step-connector{border-color:#a3b2bc}\n"] }]
         }], propDecorators: { steps: [{
                 type: Input
             }], stepIndex: [{
@@ -283,6 +248,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                 type: Input
             }] } });
 
+var PopoverTypes;
+(function (PopoverTypes) {
+    PopoverTypes["Tooltip"] = "tooltip";
+    PopoverTypes["Menu"] = "menu";
+    PopoverTypes["Legend"] = "legend";
+    PopoverTypes["Content"] = "content";
+})(PopoverTypes || (PopoverTypes = {}));
+var PopoverPosition;
+(function (PopoverPosition) {
+    PopoverPosition["Top"] = "top";
+    PopoverPosition["Bottom"] = "bottom";
+    PopoverPosition["Right"] = "right";
+    PopoverPosition["RightTop"] = "right-top";
+    PopoverPosition["Left"] = "left";
+    PopoverPosition["LeftTop"] = "left-top";
+})(PopoverPosition || (PopoverPosition = {}));
+var PopoverContentTypes;
+(function (PopoverContentTypes) {
+    PopoverContentTypes["Template"] = "template";
+    PopoverContentTypes["Component"] = "component";
+    PopoverContentTypes["Text"] = "text";
+})(PopoverContentTypes || (PopoverContentTypes = {}));
+
 class PopoverRef {
     constructor(overlay, content, data) {
         this.overlay = overlay;
@@ -307,29 +295,6 @@ class PopoverRef {
     }
 }
 
-var PopoverTypes;
-(function (PopoverTypes) {
-    PopoverTypes["Tooltip"] = "tooltip";
-    PopoverTypes["Menu"] = "menu";
-    PopoverTypes["Legend"] = "legend";
-    PopoverTypes["Content"] = "content";
-})(PopoverTypes || (PopoverTypes = {}));
-var PopoverPosition;
-(function (PopoverPosition) {
-    PopoverPosition["Top"] = "top";
-    PopoverPosition["Bottom"] = "bottom";
-    PopoverPosition["Right"] = "right";
-    PopoverPosition["RightTop"] = "right-top";
-    PopoverPosition["Left"] = "left";
-    PopoverPosition["LeftTop"] = "left-top";
-})(PopoverPosition || (PopoverPosition = {}));
-var PopoverContentTypes;
-(function (PopoverContentTypes) {
-    PopoverContentTypes["Template"] = "template";
-    PopoverContentTypes["Component"] = "component";
-    PopoverContentTypes["Text"] = "text";
-})(PopoverContentTypes || (PopoverContentTypes = {}));
-
 class PopoverComponent {
     constructor(popoverRef) {
         this.popoverRef = popoverRef;
@@ -348,15 +313,11 @@ class PopoverComponent {
         }
     }
 }
-PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PopoverComponent, deps: [{ token: PopoverRef }], target: i0.ɵɵFactoryTarget.Component });
-PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: PopoverComponent, selector: "fng-popover", ngImport: i0, template: "<div class=\"fwe-popover-container\">\n  <div class=\"fwe-triangle\"></div>\n  <div class=\"fwe-popover\">\n    <ng-container [ngSwitch]=\"type\">\n      <div class=\"fwe-popover-content\" *ngSwitchCase=\"'text'\" [innerHTML]=\"content\"></div>\n      <ng-container *ngSwitchCase=\"'template'\">\n        <ng-container *ngTemplateOutlet=\"content; context: context\"></ng-container>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'component'\">\n        <ng-container *ngComponentOutlet=\"content\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PopoverComponent, decorators: [{
+PopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PopoverComponent, deps: [{ token: PopoverRef }], target: i0.ɵɵFactoryTarget.Component });
+PopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: PopoverComponent, selector: "fng-popover", ngImport: i0, template: "<div class=\"fwe-popover-container\">\n  <div class=\"fwe-triangle\"></div>\n  <div class=\"fwe-popover\">\n    <ng-container [ngSwitch]=\"type\">\n      <div class=\"fwe-popover-content\" *ngSwitchCase=\"'text'\" [innerHTML]=\"content\"></div>\n      <ng-container *ngSwitchCase=\"'template'\">\n        <ng-container *ngTemplateOutlet=\"content; context: context\"></ng-container>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'component'\">\n        <ng-container *ngComponentOutlet=\"content\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PopoverComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-popover',
-                    templateUrl: './popover.component.html',
-                    styleUrls: ['./popover.component.scss']
-                }]
+            args: [{ selector: 'fng-popover', template: "<div class=\"fwe-popover-container\">\n  <div class=\"fwe-triangle\"></div>\n  <div class=\"fwe-popover\">\n    <ng-container [ngSwitch]=\"type\">\n      <div class=\"fwe-popover-content\" *ngSwitchCase=\"'text'\" [innerHTML]=\"content\"></div>\n      <ng-container *ngSwitchCase=\"'template'\">\n        <ng-container *ngTemplateOutlet=\"content; context: context\"></ng-container>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'component'\">\n        <ng-container *ngComponentOutlet=\"content\"></ng-container>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: PopoverRef }]; } });
 
 const defaultPositions = {
@@ -517,9 +478,9 @@ class PopoverService {
         return pairs;
     }
 }
-PopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PopoverService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-PopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PopoverService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PopoverService, decorators: [{
+PopoverService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PopoverService, deps: [{ token: i1$1.Overlay }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+PopoverService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PopoverService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PopoverService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -564,15 +525,11 @@ class PopoverMenuComponent {
         }
     }
 }
-PopoverMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PopoverMenuComponent, deps: [{ token: PopoverService }], target: i0.ɵɵFactoryTarget.Component });
-PopoverMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: PopoverMenuComponent, selector: "fng-popover-menu", inputs: { icon: "icon", menu: "menu", options: "options" }, outputs: { menuAction: "menuAction" }, host: { listeners: { "document:keydown.escape": "hide()" } }, viewQueries: [{ propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true }, { propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"0 < menu.length\">\n  <button type=\"button\" class=\"fwe-btn fwe-btn-link fwe-dark origin\" (click)=\"show($event, menuTpl, origin)\" #origin>\n    <i class=\"fwe-icon fwe-pr-0\" [ngClass]=\"icon\"></i>\n  </button>\n  <ng-template #menuTpl>\n    <ul class=\"fwe-list-group\">\n      <li *ngFor=\"let item of menu\" class=\"fwe-list-group-item\">\n        <button type=\"button\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"action(item?.action, item?.data)\">\n          <i class=\"fwe-icon\" [ngClass]=\"item?.icon\"></i>\n          <span>{{ item?.text }}</span>\n        </button>\n      </li>\n    </ul>\n  </ng-template>\n</ng-container>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PopoverMenuComponent, decorators: [{
+PopoverMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PopoverMenuComponent, deps: [{ token: PopoverService }], target: i0.ɵɵFactoryTarget.Component });
+PopoverMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: PopoverMenuComponent, selector: "fng-popover-menu", inputs: { icon: "icon", menu: "menu", options: "options" }, outputs: { menuAction: "menuAction" }, host: { listeners: { "document:keydown.escape": "hide()" } }, viewQueries: [{ propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true }, { propertyName: "origin", first: true, predicate: ["origin"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"0 < menu.length\">\n  <button type=\"button\" class=\"fwe-btn fwe-btn-link fwe-dark origin\" (click)=\"show($event, menuTpl, origin)\" #origin>\n    <i class=\"fwe-icon fwe-pr-0\" [ngClass]=\"icon\"></i>\n  </button>\n  <ng-template #menuTpl>\n    <ul class=\"fwe-list-group\">\n      <li *ngFor=\"let item of menu\" class=\"fwe-list-group-item\">\n        <button type=\"button\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"action(item?.action, item?.data)\">\n          <i class=\"fwe-icon\" [ngClass]=\"item?.icon\"></i>\n          <span>{{ item?.text }}</span>\n        </button>\n      </li>\n    </ul>\n  </ng-template>\n</ng-container>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PopoverMenuComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-popover-menu',
-                    templateUrl: './popover-menu.component.html',
-                    styleUrls: ['./popover-menu.component.scss']
-                }]
+            args: [{ selector: 'fng-popover-menu', template: "<ng-container *ngIf=\"0 < menu.length\">\n  <button type=\"button\" class=\"fwe-btn fwe-btn-link fwe-dark origin\" (click)=\"show($event, menuTpl, origin)\" #origin>\n    <i class=\"fwe-icon fwe-pr-0\" [ngClass]=\"icon\"></i>\n  </button>\n  <ng-template #menuTpl>\n    <ul class=\"fwe-list-group\">\n      <li *ngFor=\"let item of menu\" class=\"fwe-list-group-item\">\n        <button type=\"button\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"action(item?.action, item?.data)\">\n          <i class=\"fwe-icon\" [ngClass]=\"item?.icon\"></i>\n          <span>{{ item?.text }}</span>\n        </button>\n      </li>\n    </ul>\n  </ng-template>\n</ng-container>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: PopoverService }]; }, propDecorators: { icon: [{
                 type: Input
             }], menu: [{
@@ -660,9 +617,9 @@ class TooltipDirective {
         this.innerIsVisible = false;
     }
 }
-TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
-TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.0", type: TooltipDirective, selector: "[fngTooltip]", inputs: { text: ["fngTooltip", "text"], isVisible: ["fngTooltipVisible", "isVisible"], options: "options" }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TooltipDirective, decorators: [{
+TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: PopoverService }], target: i0.ɵɵFactoryTarget.Directive });
+TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: TooltipDirective, selector: "[fngTooltip]", inputs: { text: ["fngTooltip", "text"], isVisible: ["fngTooltipVisible", "isVisible"], options: "options" }, host: { listeners: { "mouseenter": "show()", "mouseleave": "hide()" } }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fngTooltip]'
@@ -739,15 +696,11 @@ class PopoverContentComponent {
         }
     }
 }
-PopoverContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PopoverContentComponent, deps: [{ token: PopoverService }], target: i0.ɵɵFactoryTarget.Component });
-PopoverContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: PopoverContentComponent, selector: "fng-popover-content", inputs: { options: "options" }, outputs: { close: "close", actions: "actions" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true }, { propertyName: "contentRef", first: true, predicate: ["fngContent"], descendants: true }], ngImport: i0, template: "<div #default *ngIf=\"showDefault; else tpl\"></div>\n<ng-template #tpl>\n  <div data-fng-root [class.fng-off-screen]=\"offScreen\">\n    <div #fngContent class=\"fng-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".fng-off-screen{position:absolute;top:-9999px;left:-9999px}.fng-content{font-size:14px;line-height:1rem}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PopoverContentComponent, decorators: [{
+PopoverContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PopoverContentComponent, deps: [{ token: PopoverService }], target: i0.ɵɵFactoryTarget.Component });
+PopoverContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: PopoverContentComponent, selector: "fng-popover-content", inputs: { options: "options" }, outputs: { close: "close", actions: "actions" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true }, { propertyName: "contentRef", first: true, predicate: ["fngContent"], descendants: true }], ngImport: i0, template: "<div #default *ngIf=\"showDefault; else tpl\"></div>\n<ng-template #tpl>\n  <div data-fng-root [class.fng-off-screen]=\"offScreen\">\n    <div #fngContent class=\"fng-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".fng-off-screen{position:absolute;top:-9999px;left:-9999px}.fng-content{font-size:14px;line-height:1rem}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PopoverContentComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-popover-content',
-                    templateUrl: './popover-content.component.html',
-                    styleUrls: ['./popover-content.component.scss']
-                }]
+            args: [{ selector: 'fng-popover-content', template: "<div #default *ngIf=\"showDefault; else tpl\"></div>\n<ng-template #tpl>\n  <div data-fng-root [class.fng-off-screen]=\"offScreen\">\n    <div #fngContent class=\"fng-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</ng-template>\n", styles: [".fng-off-screen{position:absolute;top:-9999px;left:-9999px}.fng-content{font-size:14px;line-height:1rem}\n"] }]
         }], ctorParameters: function () { return [{ type: PopoverService }]; }, propDecorators: { options: [{
                 type: Input
             }], close: [{
@@ -780,9 +733,9 @@ class PopoverContentDirective {
         }
     }
 }
-PopoverContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PopoverContentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-PopoverContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.0", type: PopoverContentDirective, selector: "[fngPopoverContent]", host: { listeners: { "click": "show()", "document:keydown.escape": "hide()" } }, queries: [{ propertyName: "component", first: true, predicate: ["fngComponent"], descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PopoverContentDirective, decorators: [{
+PopoverContentDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PopoverContentDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+PopoverContentDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: PopoverContentDirective, selector: "[fngPopoverContent]", host: { listeners: { "click": "show()", "document:keydown.escape": "hide()" } }, queries: [{ propertyName: "component", first: true, predicate: ["fngComponent"], descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PopoverContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fngPopoverContent]'
@@ -820,15 +773,11 @@ class LegendComponent {
         this.popoverRef.close();
     }
 }
-LegendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: LegendComponent, deps: [{ token: PopoverService }], target: i0.ɵɵFactoryTarget.Component });
-LegendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: LegendComponent, selector: "fng-legend", inputs: { items: "items", options: "options" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<ng-template #tpl>\n  <dl *ngIf=\"0 < items.length\" class=\"fng-legend\">\n    <div *ngFor=\"let item of items\" class=\"fng-legend-content\">\n      <dt>{{ item?.name }}</dt>\n      <dd>{{ item?.text }}</dd>\n    </div>\n  </dl>\n</ng-template>\n", styles: [".fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-top{width:17px;height:17px;position:absolute;overflow:hidden}.fwe-triangle.fwe-triangle-right:after,.fwe-triangle.fwe-triangle-left:after,.fwe-triangle.fwe-triangle-bottom:after,.fwe-triangle.fwe-triangle-top:after{content:\"\";position:absolute;width:12px;height:12px;background:var(--fwe-white);transform:rotate(45deg);box-shadow:0 1px 4px #3333}.fwe-popover.fwe-popover-menu,.fwe-popover{background-color:var(--fwe-white);box-shadow:0 1px 4px #3333;border-radius:4px}.fwe-popover{padding:8px;font-size:14px;line-height:1rem}.fwe-popover-container{position:relative;display:inline-block}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translate(-8px)}.fwe-triangle.fwe-triangle-top:after{top:11px;left:3px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translate(-8px)}.fwe-triangle.fwe-triangle-bottom:after{top:-6px;left:3px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left:after{top:2px;left:11px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right:after{top:2px;left:-6px}.fwe-popover.fwe-popover-menu{font-size:16px;line-height:1.5rem;padding:16px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button{width:100%;margin-left:inherit;padding:0 8px 0 0;text-align:left;height:32px;max-height:32px;display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=\" fwe-icon-\"]{margin-left:inherit}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{color:var(--fwe-black);background-color:#3333331a}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:#3333}.fwe-popover .fwe-popover-legend{display:table;margin:16px;line-height:24px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content{display:table-row}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dd{display:table-cell;margin:0}.fng-legend{display:table;margin:16px;line-height:24px}.fng-legend .fng-legend-content{display:table-row}.fng-legend .fng-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fng-legend .fng-legend-content dd{display:table-cell;margin:0}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: LegendComponent, decorators: [{
+LegendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LegendComponent, deps: [{ token: PopoverService }], target: i0.ɵɵFactoryTarget.Component });
+LegendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: LegendComponent, selector: "fng-legend", inputs: { items: "items", options: "options" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["tpl"], descendants: true }], ngImport: i0, template: "<ng-template #tpl>\n  <dl *ngIf=\"0 < items.length\" class=\"fng-legend\">\n    <div *ngFor=\"let item of items\" class=\"fng-legend-content\">\n      <dt>{{ item?.name }}</dt>\n      <dd>{{ item?.text }}</dd>\n    </div>\n  </dl>\n</ng-template>\n", styles: [".fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-top{width:17px;height:17px;position:absolute;overflow:hidden}.fwe-triangle.fwe-triangle-right:after,.fwe-triangle.fwe-triangle-left:after,.fwe-triangle.fwe-triangle-bottom:after,.fwe-triangle.fwe-triangle-top:after{content:\"\";position:absolute;width:12px;height:12px;background:var(--fwe-white);transform:rotate(45deg);box-shadow:0 1px 4px #3333}.fwe-popover.fwe-popover-menu,.fwe-popover{background-color:var(--fwe-white);box-shadow:0 1px 4px #3333;border-radius:4px}.fwe-popover{padding:8px;font-size:14px;line-height:1rem}.fwe-popover-container{position:relative;display:inline-block}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translate(-8px)}.fwe-triangle.fwe-triangle-top:after{top:11px;left:3px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translate(-8px)}.fwe-triangle.fwe-triangle-bottom:after{top:-6px;left:3px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left:after{top:2px;left:11px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right:after{top:2px;left:-6px}.fwe-popover.fwe-popover-menu{font-size:16px;line-height:1.5rem;padding:16px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button{width:100%;margin-left:inherit;padding:0 8px 0 0;text-align:left;height:32px;max-height:32px;display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=\" fwe-icon-\"]{margin-left:inherit}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{color:var(--fwe-black);background-color:#3333331a}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:#3333}.fwe-popover .fwe-popover-legend{display:table;margin:16px;line-height:24px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content{display:table-row}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dd{display:table-cell;margin:0}.fng-legend{display:table;margin:16px;line-height:24px}.fng-legend .fng-legend-content{display:table-row}.fng-legend .fng-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fng-legend .fng-legend-content dd{display:table-cell;margin:0}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LegendComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-legend',
-                    templateUrl: './legend.component.html',
-                    styleUrls: ['./legend.component.scss']
-                }]
+            args: [{ selector: 'fng-legend', template: "<ng-template #tpl>\n  <dl *ngIf=\"0 < items.length\" class=\"fng-legend\">\n    <div *ngFor=\"let item of items\" class=\"fng-legend-content\">\n      <dt>{{ item?.name }}</dt>\n      <dd>{{ item?.text }}</dd>\n    </div>\n  </dl>\n</ng-template>\n", styles: [".fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-top{width:17px;height:17px;position:absolute;overflow:hidden}.fwe-triangle.fwe-triangle-right:after,.fwe-triangle.fwe-triangle-left:after,.fwe-triangle.fwe-triangle-bottom:after,.fwe-triangle.fwe-triangle-top:after{content:\"\";position:absolute;width:12px;height:12px;background:var(--fwe-white);transform:rotate(45deg);box-shadow:0 1px 4px #3333}.fwe-popover.fwe-popover-menu,.fwe-popover{background-color:var(--fwe-white);box-shadow:0 1px 4px #3333;border-radius:4px}.fwe-popover{padding:8px;font-size:14px;line-height:1rem}.fwe-popover-container{position:relative;display:inline-block}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translate(-8px)}.fwe-triangle.fwe-triangle-top:after{top:11px;left:3px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translate(-8px)}.fwe-triangle.fwe-triangle-bottom:after{top:-6px;left:3px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left:after{top:2px;left:11px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right:after{top:2px;left:-6px}.fwe-popover.fwe-popover-menu{font-size:16px;line-height:1.5rem;padding:16px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button{width:100%;margin-left:inherit;padding:0 8px 0 0;text-align:left;height:32px;max-height:32px;display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=\" fwe-icon-\"]{margin-left:inherit}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{color:var(--fwe-black);background-color:#3333331a}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:#3333}.fwe-popover .fwe-popover-legend{display:table;margin:16px;line-height:24px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content{display:table-row}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dd{display:table-cell;margin:0}.fng-legend{display:table;margin:16px;line-height:24px}.fng-legend .fng-legend-content{display:table-row}.fng-legend .fng-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fng-legend .fng-legend-content dd{display:table-cell;margin:0}\n"] }]
         }], ctorParameters: function () { return [{ type: PopoverService }]; }, propDecorators: { items: [{
                 type: Input
             }], options: [{
@@ -851,9 +800,9 @@ class LegendDirective {
         }
     }
 }
-LegendDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: LegendDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-LegendDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.0", type: LegendDirective, selector: "[fngLegend]", host: { listeners: { "click": "show()" } }, queries: [{ propertyName: "ref", first: true, predicate: ["fngContent"], descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: LegendDirective, decorators: [{
+LegendDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LegendDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+LegendDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: LegendDirective, selector: "[fngLegend]", host: { listeners: { "click": "show()" } }, queries: [{ propertyName: "ref", first: true, predicate: ["fngContent"], descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: LegendDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fngLegend]'
@@ -871,14 +820,11 @@ class ProgressComponent {
         this.background = 'white';
     }
 }
-ProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: ProgressComponent, selector: "fng-progress", inputs: { progress: "progress", error: "error", background: "background" }, ngImport: i0, template: "<div class=\"fwe-progress\">\n  <div\n    class=\"fwe-progress-bar\"\n    role=\"progressbar\"\n    [style.width.%]=\"progress\"\n    [class.fwe-bg-red]=\"error\"\n    [class.fwe-progress-bar-black]=\"background === 'black'\"\n    [class.fwe-progress-bar-background]=\"background === 'background'\"\n    [attr.aria-valuenow]=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  ></div>\n</div>\n" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ProgressComponent, decorators: [{
+ProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ProgressComponent, selector: "fng-progress", inputs: { progress: "progress", error: "error", background: "background" }, ngImport: i0, template: "<div class=\"fwe-progress\">\n  <div\n    class=\"fwe-progress-bar\"\n    role=\"progressbar\"\n    [style.width.%]=\"progress\"\n    [class.fwe-bg-red]=\"error\"\n    [class.fwe-progress-bar-black]=\"background === 'black'\"\n    [class.fwe-progress-bar-background]=\"background === 'background'\"\n    [attr.aria-valuenow]=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  ></div>\n</div>\n" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ProgressComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-progress',
-                    templateUrl: './progress.component.html'
-                }]
+            args: [{ selector: 'fng-progress', template: "<div class=\"fwe-progress\">\n  <div\n    class=\"fwe-progress-bar\"\n    role=\"progressbar\"\n    [style.width.%]=\"progress\"\n    [class.fwe-bg-red]=\"error\"\n    [class.fwe-progress-bar-black]=\"background === 'black'\"\n    [class.fwe-progress-bar-background]=\"background === 'background'\"\n    [attr.aria-valuenow]=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  ></div>\n</div>\n" }]
         }], propDecorators: { progress: [{
                 type: Input
             }], error: [{
@@ -898,15 +844,11 @@ class TabPaneComponent {
     }
 }
 TabPaneComponent.nextId = 0;
-TabPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TabPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: TabPaneComponent, selector: "fng-tab-pane", inputs: { id: "id", name: "name", icon: "icon", active: "active", isVisible: "isVisible" }, usesOnChanges: true, ngImport: i0, template: "<div role=\"tabpanel\" [id]=\"tabPaneId\" [attr.aria-labelledby]=\"tabId\" [class.fng-show]=\"isVisible\" [class.fng-hide]=\"!isVisible\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-show{display:block}.fng-hide{display:none}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TabPaneComponent, decorators: [{
+TabPaneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TabPaneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TabPaneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TabPaneComponent, selector: "fng-tab-pane", inputs: { id: "id", name: "name", icon: "icon", active: "active", isVisible: "isVisible" }, usesOnChanges: true, ngImport: i0, template: "<div role=\"tabpanel\" [id]=\"tabPaneId\" [attr.aria-labelledby]=\"tabId\" [class.fng-show]=\"isVisible\" [class.fng-hide]=\"!isVisible\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-show{display:block}.fng-hide{display:none}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TabPaneComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-tab-pane',
-                    templateUrl: './tab-pane.component.html',
-                    styleUrls: ['./tab-pane.component.scss']
-                }]
+            args: [{ selector: 'fng-tab-pane', template: "<div role=\"tabpanel\" [id]=\"tabPaneId\" [attr.aria-labelledby]=\"tabId\" [class.fng-show]=\"isVisible\" [class.fng-hide]=\"!isVisible\">\n  <ng-content></ng-content>\n</div>\n", styles: [".fng-show{display:block}.fng-hide{display:none}\n"] }]
         }], propDecorators: { id: [{
                 type: Input
             }], name: [{
@@ -1237,20 +1179,17 @@ class TabsComponent {
     }
 }
 TabsComponent.nextId = 0;
-TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: TabsComponent, selector: "fng-tabs", inputs: { viewType: ["fngTabsViewType", "viewType"], showDivider: ["fngTabsUseBottomDivider", "showDivider"], config: "config" }, outputs: { fngTabChange: "fngTabChange" }, queries: [{ propertyName: "panes", predicate: TabPaneComponent }], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "scrollAera", first: true, predicate: ["scrollAera"], descendants: true }, { propertyName: "scrollContent", first: true, predicate: ["scrollContent"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"viewType === 'legacy'\">\n  <div class=\"fwe-legacy-tabs\">\n    <ul\n      role=\"tablist\"\n      class=\"fwe-legacy-tab-bar\"\n      [class.fwe-legacy-tab-bar-full-width]=\"config?.tabBar?.fullWidth\"\n      [class.fwe-legacy-tab-items-equal-width]=\"'equal' === config?.tabItems?.appearance\"\n      [class.fwe-legacy-tab-items-fill]=\"'fill' === config?.tabItems?.appearance\"\n    >\n      <li *ngFor=\"let tab of tabs; let i = index\" class=\"fwe-legacy-tab-item\" [class.fwe-active]=\"tab?.active\">\n        <ng-container *ngIf=\"null == tab?.icon\">\n          <a\n            [id]=\"componentId + '-tab-' + i\"\n            [attr.aria-controls]=\"tab.paneId\"\n            [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n            role=\"tab\"\n            class=\"fwe-legacy-tab-link\"\n            (click)=\"showTabPane(tab.paneId)\"\n            >{{ tab.name }}</a\n          >\n        </ng-container>\n        <ng-container *ngIf=\"null != tab?.icon\">\n          <a\n            [id]=\"componentId + '-tab-' + i\"\n            [attr.aria-controls]=\"tab.paneId\"\n            [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n            role=\"tab\"\n            class=\"fwe-legacy-tab-link\"\n            (click)=\"showTabPane(tab.paneId)\"\n            [class.fwe-can-swap-icon]=\"2 === tabs.length && 1 === i\"\n          >\n            <i [class]=\"'fwe-icon ' + tab.icon\"></i>\n            <span>{{ tab.name }}</span>\n          </a>\n        </ng-container>\n      </li>\n    </ul>\n    <div class=\"fwe-legacy-tab-panel-content\">\n      <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewType !== 'legacy'\">\n  <div class=\"fng-tab-bar\" role=\"tablist\">\n    <div class=\"fng-tab-scroller\" #scroller>\n      <div\n        class=\"fng-tab-scroller-scroll-area fng-tab-scroller-scroll-area--scroll\"\n        [class.fng-tab-scroller-scroll-area--compact]=\"useCompactDensity\"\n        #scrollAera\n      >\n        <div class=\"fng-tab-scroller-scroll-content\" [class.fng-tab-scroller-scroll-content--with-divider]=\"showDivider\" #scrollContent>\n          <button\n            *ngFor=\"let tab of tabs; let i = index\"\n            role=\"tab\"\n            class=\"fng-tab\"\n            [id]=\"componentId + '-tab-' + i\"\n            [attr.aria-controls]=\"tab.paneId\"\n            [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n            [tabindex]=\"i === 0 ? 0 : -1\"\n            [class.fng-tab--active]=\"tab?.active\"\n            (click)=\"handleTabScroll($event, i); showTabPane(tab.paneId)\"\n          >\n            <span class=\"fng-tab-content\">\n              <span class=\"fng-tab-text-label\">{{ tab.name }}</span>\n            </span>\n            <span class=\"fng-tab-indicator\" [class.fng-tab-indicator--active]=\"tab?.active\">\n              <span class=\"fng-tab-indicator-content fng-tab-indicator-content--underline\"></span>\n            </span>\n          </button>\n          <div class=\"fng-tab-scroller-divider-line\"></div>\n        </div>\n      </div>\n    </div>\n    <div class=\"fng-tab-panel-content\">\n      <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #tabPanelContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".fwe-legacy-tabs{margin:48px 0;width:100%;height:100%}.fwe-legacy-tab-bar{display:flex;flex-wrap:nowrap;width:75%;padding-left:0;margin-bottom:0;margin-top:0;list-style:none;font-size:16px}.fwe-legacy-tab-bar.fwe-legacy-tab-bar-full-width{width:100%}.fwe-legacy-tab-bar.fwe-legacy-tab-items-fill .fwe-legacy-tab-item{flex:1 1 auto}.fwe-legacy-tab-bar.fwe-legacy-tab-items-equal-width .fwe-legacy-tab-item{flex:1 1 0}.fwe-legacy-tab-item{height:48px;max-height:48px;background-color:var(--fwe-gray-300);border-right:2px solid var(--fwe-gray-100);text-align:center}.fwe-legacy-tab-item:last-child{border-right:none}.fwe-legacy-tab-item.fwe-active{background-color:var(--fwe-white)}.fwe-legacy-tab-item.fwe-active .fwe-legacy-tab-link{color:var(--fwe-caerul)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-gray-100)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link{padding:11px 16px}.fwe-legacy-tab-link{display:inline-block;width:100%;height:48px;padding:11px 16px 13px;line-height:24px;cursor:pointer;color:var(--fwe-black);white-space:nowrap}.fwe-legacy-tab-link i.fwe-icon{padding-right:8px;vertical-align:baseline;vertical-align:initial}.fwe-legacy-tab-link i.fwe-icon.fwe-icon-lg{position:relative;top:3px}.fwe-legacy-tab-link:hover{color:var(--fwe-caerul)}.fwe-legacy-tab-link:active{background-color:var(--fwe-white);color:var(--fwe-caerul)}.fwe-legacy-tab-panel-content{padding:48px 24px;background-color:var(--fwe-white);height:100%;overflow:auto}@media (max-width: 375px){.fwe-legacy-tab-bar{justify-content:space-between;background-color:var(--fwe-white);width:100%}.fwe-legacy-tab-item{background-color:var(--fwe-white);border-right:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link{color:var(--fwe-icon-gray)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link i.fwe-icon{color:var(--fwe-icon-gray)}.fwe-legacy-tab-link.fwe-can-swap-icon{direction:rtl}.fwe-legacy-tab-link.fwe-can-swap-icon i.fwe-icon{padding-left:8px;padding-right:0}}.fng-tab-panel-content{padding:48px 24px;background-color:var(--fwe-white);height:100%;overflow:auto}.fng-tab-bar{width:100%}.fng-tab-scroller{overflow-y:hidden}.fng-tab-scroller-scroll-area{position:relative;display:flex;overflow-x:hidden}.fng-tab-scroller-scroll-area::-webkit-scrollbar{display:none}.fng-tab-scroller-scroll-area--scroll{overflow-x:scroll}.fng-tab-scroller-scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform;padding:0 17px 0 16px}.fng-tab-scroller-scroll-content--with-divider .fng-tab-scroller-divider-line{display:block}.fng-tab-scroller--animating .fng-tab-scroller-scroll-content{transition:.25s transform cubic-bezier(.4,0,.2,1)}.fng-tab-scroller-divider-line{display:none;position:absolute;top:0;left:0;right:0;bottom:0;border-bottom:1px solid var(--fwe-control)}.fng-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.fng-tab-indicator-content{transform-origin:left;opacity:0}.fng-tab-indicator-content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.fng-tab-indicator .fng-tab-indicator-content{transition:.25s transform cubic-bezier(.4,0,.2,1)}.fng-tab-indicator .fng-tab-indicator-content--underline{border-top:4px solid var(--fwe-caerul)}.fng-tab-indicator--active .fng-tab-indicator-content{opacity:1}.fng-tab{position:relative;display:flex;flex:1 0 auto;justify-content:center;padding:0;margin:0;border:none;outline:none;background:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1;height:36px}.fng-tab:not(:last-child){margin-right:32px}.fng-tab::-moz-focus-inner{padding:0;border:0}.fng-tab .fng-tab-text-label{color:var(--fwe-text)}.fng-tab--active .fng-tab-text-label{color:var(--fwe-caerul)}.fng-tab-content{position:relative;display:flex;align-items:flex-start;justify-content:center;height:inherit;pointer-events:none}.fng-tab-text-label{display:inline-block;z-index:2}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab{flex:none}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab:not(:last-child){margin-right:64px}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab-scroller-scroll-content{padding:0 32px}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab-scroller-divider-line{padding-right:64px}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TabsComponent, decorators: [{
+TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TabsComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TabsComponent, selector: "fng-tabs", inputs: { viewType: ["fngTabsViewType", "viewType"], showDivider: ["fngTabsUseBottomDivider", "showDivider"], config: "config" }, outputs: { fngTabChange: "fngTabChange" }, queries: [{ propertyName: "panes", predicate: TabPaneComponent }], viewQueries: [{ propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "scrollAera", first: true, predicate: ["scrollAera"], descendants: true }, { propertyName: "scrollContent", first: true, predicate: ["scrollContent"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"viewType === 'legacy'\">\n  <div class=\"fwe-legacy-tabs\">\n    <ul\n      role=\"tablist\"\n      class=\"fwe-legacy-tab-bar\"\n      [class.fwe-legacy-tab-bar-full-width]=\"config?.tabBar?.fullWidth\"\n      [class.fwe-legacy-tab-items-equal-width]=\"'equal' === config?.tabItems?.appearance\"\n      [class.fwe-legacy-tab-items-fill]=\"'fill' === config?.tabItems?.appearance\"\n    >\n      <li *ngFor=\"let tab of tabs; let i = index\" class=\"fwe-legacy-tab-item\" [class.fwe-active]=\"tab?.active\">\n        <ng-container *ngIf=\"null == tab?.icon\">\n          <a\n            [id]=\"componentId + '-tab-' + i\"\n            [attr.aria-controls]=\"tab.paneId\"\n            [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n            role=\"tab\"\n            class=\"fwe-legacy-tab-link\"\n            (click)=\"showTabPane(tab.paneId)\"\n            >{{ tab.name }}</a\n          >\n        </ng-container>\n        <ng-container *ngIf=\"null != tab?.icon\">\n          <a\n            [id]=\"componentId + '-tab-' + i\"\n            [attr.aria-controls]=\"tab.paneId\"\n            [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n            role=\"tab\"\n            class=\"fwe-legacy-tab-link\"\n            (click)=\"showTabPane(tab.paneId)\"\n            [class.fwe-can-swap-icon]=\"2 === tabs.length && 1 === i\"\n          >\n            <i [class]=\"'fwe-icon ' + tab.icon\"></i>\n            <span>{{ tab.name }}</span>\n          </a>\n        </ng-container>\n      </li>\n    </ul>\n    <div class=\"fwe-legacy-tab-panel-content\">\n      <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewType !== 'legacy'\">\n  <div class=\"fng-tab-bar\" role=\"tablist\">\n    <div class=\"fng-tab-scroller\" #scroller>\n      <div\n        class=\"fng-tab-scroller-scroll-area fng-tab-scroller-scroll-area--scroll\"\n        [class.fng-tab-scroller-scroll-area--compact]=\"useCompactDensity\"\n        #scrollAera\n      >\n        <div class=\"fng-tab-scroller-scroll-content\" [class.fng-tab-scroller-scroll-content--with-divider]=\"showDivider\" #scrollContent>\n          <button\n            *ngFor=\"let tab of tabs; let i = index\"\n            role=\"tab\"\n            class=\"fng-tab\"\n            [id]=\"componentId + '-tab-' + i\"\n            [attr.aria-controls]=\"tab.paneId\"\n            [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n            [tabindex]=\"i === 0 ? 0 : -1\"\n            [class.fng-tab--active]=\"tab?.active\"\n            (click)=\"handleTabScroll($event, i); showTabPane(tab.paneId)\"\n          >\n            <span class=\"fng-tab-content\">\n              <span class=\"fng-tab-text-label\">{{ tab.name }}</span>\n            </span>\n            <span class=\"fng-tab-indicator\" [class.fng-tab-indicator--active]=\"tab?.active\">\n              <span class=\"fng-tab-indicator-content fng-tab-indicator-content--underline\"></span>\n            </span>\n          </button>\n          <div class=\"fng-tab-scroller-divider-line\"></div>\n        </div>\n      </div>\n    </div>\n    <div class=\"fng-tab-panel-content\">\n      <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #tabPanelContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".fwe-legacy-tabs{margin:48px 0;width:100%;height:100%}.fwe-legacy-tab-bar{display:flex;flex-wrap:nowrap;width:75%;padding-left:0;margin-bottom:0;margin-top:0;list-style:none;font-size:16px}.fwe-legacy-tab-bar.fwe-legacy-tab-bar-full-width{width:100%}.fwe-legacy-tab-bar.fwe-legacy-tab-items-fill .fwe-legacy-tab-item{flex:1 1 auto}.fwe-legacy-tab-bar.fwe-legacy-tab-items-equal-width .fwe-legacy-tab-item{flex:1 1 0}.fwe-legacy-tab-item{height:48px;max-height:48px;background-color:var(--fwe-gray-300);border-right:2px solid var(--fwe-gray-100);text-align:center}.fwe-legacy-tab-item:last-child{border-right:none}.fwe-legacy-tab-item.fwe-active{background-color:var(--fwe-white)}.fwe-legacy-tab-item.fwe-active .fwe-legacy-tab-link{color:var(--fwe-caerul)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-gray-100)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link{padding:11px 16px}.fwe-legacy-tab-link{display:inline-block;width:100%;height:48px;padding:11px 16px 13px;line-height:24px;cursor:pointer;color:var(--fwe-black);white-space:nowrap}.fwe-legacy-tab-link i.fwe-icon{padding-right:8px;vertical-align:initial}.fwe-legacy-tab-link i.fwe-icon.fwe-icon-lg{position:relative;top:3px}.fwe-legacy-tab-link:hover{color:var(--fwe-caerul)}.fwe-legacy-tab-link:active{background-color:var(--fwe-white);color:var(--fwe-caerul)}.fwe-legacy-tab-panel-content{padding:48px 24px;background-color:var(--fwe-white);height:100%;overflow:auto}@media (max-width: 375px){.fwe-legacy-tab-bar{justify-content:space-between;background-color:var(--fwe-white);width:100%}.fwe-legacy-tab-item{background-color:var(--fwe-white);border-right:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link{color:var(--fwe-icon-gray)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link i.fwe-icon{color:var(--fwe-icon-gray)}.fwe-legacy-tab-link.fwe-can-swap-icon{direction:rtl}.fwe-legacy-tab-link.fwe-can-swap-icon i.fwe-icon{padding-left:8px;padding-right:0}}.fng-tab-panel-content{padding:48px 24px;background-color:var(--fwe-white);height:100%;overflow:auto}.fng-tab-bar{width:100%}.fng-tab-scroller{overflow-y:hidden}.fng-tab-scroller-scroll-area{position:relative;display:flex;overflow-x:hidden}.fng-tab-scroller-scroll-area::-webkit-scrollbar{display:none}.fng-tab-scroller-scroll-area--scroll{overflow-x:scroll}.fng-tab-scroller-scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform;padding:0 17px 0 16px}.fng-tab-scroller-scroll-content--with-divider .fng-tab-scroller-divider-line{display:block}.fng-tab-scroller--animating .fng-tab-scroller-scroll-content{transition:.25s transform cubic-bezier(.4,0,.2,1)}.fng-tab-scroller-divider-line{display:none;position:absolute;top:0;left:0;right:0;bottom:0;border-bottom:1px solid var(--fwe-control)}.fng-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.fng-tab-indicator-content{transform-origin:left;opacity:0}.fng-tab-indicator-content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.fng-tab-indicator .fng-tab-indicator-content{transition:.25s transform cubic-bezier(.4,0,.2,1)}.fng-tab-indicator .fng-tab-indicator-content--underline{border-top:4px solid var(--fwe-caerul)}.fng-tab-indicator--active .fng-tab-indicator-content{opacity:1}.fng-tab{position:relative;display:flex;flex:1 0 auto;justify-content:center;padding:0;margin:0;border:none;outline:none;background:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1;height:36px}.fng-tab:not(:last-child){margin-right:32px}.fng-tab::-moz-focus-inner{padding:0;border:0}.fng-tab .fng-tab-text-label{color:var(--fwe-text)}.fng-tab--active .fng-tab-text-label{color:var(--fwe-caerul)}.fng-tab-content{position:relative;display:flex;align-items:flex-start;justify-content:center;height:inherit;pointer-events:none}.fng-tab-text-label{display:inline-block;z-index:2}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab{flex:none}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab:not(:last-child){margin-right:64px}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab-scroller-scroll-content{padding:0 32px}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab-scroller-divider-line{padding-right:64px}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-tabs',
-                    templateUrl: './tabs.component.html',
-                    styleUrls: ['./tabs.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { viewType: [{
+            args: [{ selector: 'fng-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"viewType === 'legacy'\">\n  <div class=\"fwe-legacy-tabs\">\n    <ul\n      role=\"tablist\"\n      class=\"fwe-legacy-tab-bar\"\n      [class.fwe-legacy-tab-bar-full-width]=\"config?.tabBar?.fullWidth\"\n      [class.fwe-legacy-tab-items-equal-width]=\"'equal' === config?.tabItems?.appearance\"\n      [class.fwe-legacy-tab-items-fill]=\"'fill' === config?.tabItems?.appearance\"\n    >\n      <li *ngFor=\"let tab of tabs; let i = index\" class=\"fwe-legacy-tab-item\" [class.fwe-active]=\"tab?.active\">\n        <ng-container *ngIf=\"null == tab?.icon\">\n          <a\n            [id]=\"componentId + '-tab-' + i\"\n            [attr.aria-controls]=\"tab.paneId\"\n            [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n            role=\"tab\"\n            class=\"fwe-legacy-tab-link\"\n            (click)=\"showTabPane(tab.paneId)\"\n            >{{ tab.name }}</a\n          >\n        </ng-container>\n        <ng-container *ngIf=\"null != tab?.icon\">\n          <a\n            [id]=\"componentId + '-tab-' + i\"\n            [attr.aria-controls]=\"tab.paneId\"\n            [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n            role=\"tab\"\n            class=\"fwe-legacy-tab-link\"\n            (click)=\"showTabPane(tab.paneId)\"\n            [class.fwe-can-swap-icon]=\"2 === tabs.length && 1 === i\"\n          >\n            <i [class]=\"'fwe-icon ' + tab.icon\"></i>\n            <span>{{ tab.name }}</span>\n          </a>\n        </ng-container>\n      </li>\n    </ul>\n    <div class=\"fwe-legacy-tab-panel-content\">\n      <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\n    </div>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"viewType !== 'legacy'\">\n  <div class=\"fng-tab-bar\" role=\"tablist\">\n    <div class=\"fng-tab-scroller\" #scroller>\n      <div\n        class=\"fng-tab-scroller-scroll-area fng-tab-scroller-scroll-area--scroll\"\n        [class.fng-tab-scroller-scroll-area--compact]=\"useCompactDensity\"\n        #scrollAera\n      >\n        <div class=\"fng-tab-scroller-scroll-content\" [class.fng-tab-scroller-scroll-content--with-divider]=\"showDivider\" #scrollContent>\n          <button\n            *ngFor=\"let tab of tabs; let i = index\"\n            role=\"tab\"\n            class=\"fng-tab\"\n            [id]=\"componentId + '-tab-' + i\"\n            [attr.aria-controls]=\"tab.paneId\"\n            [attr.aria-selected]=\"true === tab?.active ? 'true' : 'false'\"\n            [tabindex]=\"i === 0 ? 0 : -1\"\n            [class.fng-tab--active]=\"tab?.active\"\n            (click)=\"handleTabScroll($event, i); showTabPane(tab.paneId)\"\n          >\n            <span class=\"fng-tab-content\">\n              <span class=\"fng-tab-text-label\">{{ tab.name }}</span>\n            </span>\n            <span class=\"fng-tab-indicator\" [class.fng-tab-indicator--active]=\"tab?.active\">\n              <span class=\"fng-tab-indicator-content fng-tab-indicator-content--underline\"></span>\n            </span>\n          </button>\n          <div class=\"fng-tab-scroller-divider-line\"></div>\n        </div>\n      </div>\n    </div>\n    <div class=\"fng-tab-panel-content\">\n      <ng-container *ngTemplateOutlet=\"tabPanelContent\"></ng-container>\n    </div>\n  </div>\n</ng-container>\n\n<ng-template #tabPanelContent>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [".fwe-legacy-tabs{margin:48px 0;width:100%;height:100%}.fwe-legacy-tab-bar{display:flex;flex-wrap:nowrap;width:75%;padding-left:0;margin-bottom:0;margin-top:0;list-style:none;font-size:16px}.fwe-legacy-tab-bar.fwe-legacy-tab-bar-full-width{width:100%}.fwe-legacy-tab-bar.fwe-legacy-tab-items-fill .fwe-legacy-tab-item{flex:1 1 auto}.fwe-legacy-tab-bar.fwe-legacy-tab-items-equal-width .fwe-legacy-tab-item{flex:1 1 0}.fwe-legacy-tab-item{height:48px;max-height:48px;background-color:var(--fwe-gray-300);border-right:2px solid var(--fwe-gray-100);text-align:center}.fwe-legacy-tab-item:last-child{border-right:none}.fwe-legacy-tab-item.fwe-active{background-color:var(--fwe-white)}.fwe-legacy-tab-item.fwe-active .fwe-legacy-tab-link{color:var(--fwe-caerul)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-gray-100)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link{padding:11px 16px}.fwe-legacy-tab-link{display:inline-block;width:100%;height:48px;padding:11px 16px 13px;line-height:24px;cursor:pointer;color:var(--fwe-black);white-space:nowrap}.fwe-legacy-tab-link i.fwe-icon{padding-right:8px;vertical-align:initial}.fwe-legacy-tab-link i.fwe-icon.fwe-icon-lg{position:relative;top:3px}.fwe-legacy-tab-link:hover{color:var(--fwe-caerul)}.fwe-legacy-tab-link:active{background-color:var(--fwe-white);color:var(--fwe-caerul)}.fwe-legacy-tab-panel-content{padding:48px 24px;background-color:var(--fwe-white);height:100%;overflow:auto}@media (max-width: 375px){.fwe-legacy-tab-bar{justify-content:space-between;background-color:var(--fwe-white);width:100%}.fwe-legacy-tab-item{background-color:var(--fwe-white);border-right:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active){border-bottom:2px solid var(--fwe-white)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link{color:var(--fwe-icon-gray)}.fwe-legacy-tab-item:not(.fwe-active) .fwe-legacy-tab-link i.fwe-icon{color:var(--fwe-icon-gray)}.fwe-legacy-tab-link.fwe-can-swap-icon{direction:rtl}.fwe-legacy-tab-link.fwe-can-swap-icon i.fwe-icon{padding-left:8px;padding-right:0}}.fng-tab-panel-content{padding:48px 24px;background-color:var(--fwe-white);height:100%;overflow:auto}.fng-tab-bar{width:100%}.fng-tab-scroller{overflow-y:hidden}.fng-tab-scroller-scroll-area{position:relative;display:flex;overflow-x:hidden}.fng-tab-scroller-scroll-area::-webkit-scrollbar{display:none}.fng-tab-scroller-scroll-area--scroll{overflow-x:scroll}.fng-tab-scroller-scroll-content{position:relative;display:flex;flex:1 0 auto;transform:none;will-change:transform;padding:0 17px 0 16px}.fng-tab-scroller-scroll-content--with-divider .fng-tab-scroller-divider-line{display:block}.fng-tab-scroller--animating .fng-tab-scroller-scroll-content{transition:.25s transform cubic-bezier(.4,0,.2,1)}.fng-tab-scroller-divider-line{display:none;position:absolute;top:0;left:0;right:0;bottom:0;border-bottom:1px solid var(--fwe-control)}.fng-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.fng-tab-indicator-content{transform-origin:left;opacity:0}.fng-tab-indicator-content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.fng-tab-indicator .fng-tab-indicator-content{transition:.25s transform cubic-bezier(.4,0,.2,1)}.fng-tab-indicator .fng-tab-indicator-content--underline{border-top:4px solid var(--fwe-caerul)}.fng-tab-indicator--active .fng-tab-indicator-content{opacity:1}.fng-tab{position:relative;display:flex;flex:1 0 auto;justify-content:center;padding:0;margin:0;border:none;outline:none;background:none;text-align:center;white-space:nowrap;cursor:pointer;-webkit-appearance:none;z-index:1;height:36px}.fng-tab:not(:last-child){margin-right:32px}.fng-tab::-moz-focus-inner{padding:0;border:0}.fng-tab .fng-tab-text-label{color:var(--fwe-text)}.fng-tab--active .fng-tab-text-label{color:var(--fwe-caerul)}.fng-tab-content{position:relative;display:flex;align-items:flex-start;justify-content:center;height:inherit;pointer-events:none}.fng-tab-text-label{display:inline-block;z-index:2}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab{flex:none}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab:not(:last-child){margin-right:64px}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab-scroller-scroll-content{padding:0 32px}.fng-tab-scroller-scroll-area:not(.fng-tab-scroller-scroll-area--compact) .fng-tab-scroller-divider-line{padding-right:64px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i0.ElementRef }, { type: Document, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { viewType: [{
                 type: Input,
                 args: ['fngTabsViewType']
             }], showDivider: [{
@@ -1311,16 +1250,11 @@ class PaginationComponent {
         this.changePage.emit(this.pageCurrent);
     }
 }
-PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: PaginationComponent, selector: "fng-pagination", inputs: { type: "type", pageCurrent: "pageCurrent", pageMax: "pageMax" }, outputs: { changePage: "changePage" }, ngImport: i0, template: "<ng-container *ngIf=\"type === PaginationType.Numeric\">\n  <div class=\"fwe-pagination fwe-p-m\" [class.fwe-d-none]=\"pageMax < 2\">\n    <button class=\"fwe-navigate-btn-down\" (click)=\"onBtnDown()\" [class.fwe-disabled]=\"pageCurrent <= 1\"></button>\n    <span class=\"fwe-page-current\">{{ pageCurrent }}</span>\n    <span class=\"fwe-page-max\">{{ pageMax }}</span>\n    <button class=\"fwe-navigate-btn-up\" (click)=\"onBtnUp()\" [class.fwe-disabled]=\"pageCurrent >= pageMax\"></button>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"type === PaginationType.Dots\">\n  <div class=\"fwe-p-m\" [class.fwe-d-none]=\"pageMax < 2\">\n    <div class=\"fwe-pagination\">\n      <span\n        *ngFor=\"let index of dotArray\"\n        class=\"fwe-page-dot\"\n        [class.fwe-selected]=\"index + 1 === pageCurrent\"\n        (click)=\"onDotClick(index)\"\n      ></span>\n    </div>\n  </div>\n</ng-container>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PaginationComponent, decorators: [{
+PaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: PaginationComponent, selector: "fng-pagination", inputs: { type: "type", pageCurrent: "pageCurrent", pageMax: "pageMax" }, outputs: { changePage: "changePage" }, ngImport: i0, template: "<ng-container *ngIf=\"type === PaginationType.Numeric\">\n  <div class=\"fwe-pagination fwe-p-m\" [class.fwe-d-none]=\"pageMax < 2\">\n    <button class=\"fwe-navigate-btn-down\" (click)=\"onBtnDown()\" [class.fwe-disabled]=\"pageCurrent <= 1\"></button>\n    <span class=\"fwe-page-current\">{{ pageCurrent }}</span>\n    <span class=\"fwe-page-max\">{{ pageMax }}</span>\n    <button class=\"fwe-navigate-btn-up\" (click)=\"onBtnUp()\" [class.fwe-disabled]=\"pageCurrent >= pageMax\"></button>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"type === PaginationType.Dots\">\n  <div class=\"fwe-p-m\" [class.fwe-d-none]=\"pageMax < 2\">\n    <div class=\"fwe-pagination\">\n      <span\n        *ngFor=\"let index of dotArray\"\n        class=\"fwe-page-dot\"\n        [class.fwe-selected]=\"index + 1 === pageCurrent\"\n        (click)=\"onDotClick(index)\"\n      ></span>\n    </div>\n  </div>\n</ng-container>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PaginationComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-pagination',
-                    templateUrl: './pagination.component.html',
-                    styleUrls: ['./pagination.component.scss'],
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-pagination', encapsulation: ViewEncapsulation.None, template: "<ng-container *ngIf=\"type === PaginationType.Numeric\">\n  <div class=\"fwe-pagination fwe-p-m\" [class.fwe-d-none]=\"pageMax < 2\">\n    <button class=\"fwe-navigate-btn-down\" (click)=\"onBtnDown()\" [class.fwe-disabled]=\"pageCurrent <= 1\"></button>\n    <span class=\"fwe-page-current\">{{ pageCurrent }}</span>\n    <span class=\"fwe-page-max\">{{ pageMax }}</span>\n    <button class=\"fwe-navigate-btn-up\" (click)=\"onBtnUp()\" [class.fwe-disabled]=\"pageCurrent >= pageMax\"></button>\n  </div>\n</ng-container>\n\n<ng-container *ngIf=\"type === PaginationType.Dots\">\n  <div class=\"fwe-p-m\" [class.fwe-d-none]=\"pageMax < 2\">\n    <div class=\"fwe-pagination\">\n      <span\n        *ngFor=\"let index of dotArray\"\n        class=\"fwe-page-dot\"\n        [class.fwe-selected]=\"index + 1 === pageCurrent\"\n        (click)=\"onDotClick(index)\"\n      ></span>\n    </div>\n  </div>\n</ng-container>\n", styles: [""] }]
         }], propDecorators: { type: [{
                 type: Input
             }], pageCurrent: [{
@@ -1386,9 +1320,9 @@ class ScrollableDirective {
         };
     }
 }
-ScrollableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ScrollableDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-ScrollableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.0", type: ScrollableDirective, selector: "[fngScrollable]", inputs: { scrollbarMinSize: ["fngScrollableScrollbarMinSize", "scrollbarMinSize"], viewReady: ["fngScrollableViewReady", "viewReady"] }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ScrollableDirective, decorators: [{
+ScrollableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ScrollableDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+ScrollableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: ScrollableDirective, selector: "[fngScrollable]", inputs: { scrollbarMinSize: ["fngScrollableScrollbarMinSize", "scrollbarMinSize"], viewReady: ["fngScrollableViewReady", "viewReady"] }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ScrollableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fngScrollable]'
@@ -1413,9 +1347,9 @@ class ClickOutsideDirective {
         }
     }
 }
-ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.0", type: ClickOutsideDirective, selector: "[fngClickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ClickOutsideDirective, decorators: [{
+ClickOutsideDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ClickOutsideDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ClickOutsideDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: ClickOutsideDirective, selector: "[fngClickOutside]", outputs: { clickOutside: "clickOutside" }, host: { listeners: { "document:click": "onClick($event.target)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ClickOutsideDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fngClickOutside]'
@@ -1547,16 +1481,11 @@ class SearchInputComponent {
         this.inputRef.nativeElement.blur();
     }
 }
-SearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: SearchInputComponent, selector: "fng-search-input", inputs: { label: "label", disabled: "disabled", value: "value", suggestions: "suggestions" }, outputs: { fngChange: "fngChange", fngSearch: "fngSearch" }, host: { listeners: { "document:keydown": "keyhandler($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"fwe-search-input fwe-w-100\" (clickOutside)=\"onClickOutside()\" fngClickOutside>\n  <input\n    class=\"fwe-w-100\"\n    #inputElement\n    [attr.disabled]=\"disabled ? '' : null\"\n    [placeholder]=\"label\"\n    (focus)=\"onFocus()\"\n    type=\"search\"\n    (input)=\"onInput($event)\"\n    (search)=\"onSearch($event)\"\n    [value]=\"innerValue\"\n  />\n  <div class=\"fwe-search-icon\"></div>\n  <div class=\"fwe-clear-icon\" (click)=\"clearQuerry()\"></div>\n  <div class=\"fwe-search-suggestions\" *ngIf=\"innerSuggestions?.length && !hideSuggestionList\">\n    <div\n      *ngFor=\"let suggestion of cappedSuggestions; let i = index\"\n      (click)=\"onSuggestionClick(suggestion)\"\n      [class.fwe-selected]=\"selectedSuggestionIndex === i\"\n      class=\"fwe-search-suggestion\"\n    >\n      {{ suggestion }}\n    </div>\n    <div class=\"fwe-ml-xxs\" *ngIf=\"innerSuggestions.length > 10\">...</div>\n  </div>\n</div>\n", styles: [".fwe-w-100{width:100%}\n"], directives: [{ type: ClickOutsideDirective, selector: "[fngClickOutside]", outputs: ["clickOutside"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SearchInputComponent, decorators: [{
+SearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SearchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: SearchInputComponent, selector: "fng-search-input", inputs: { label: "label", disabled: "disabled", value: "value", suggestions: "suggestions" }, outputs: { fngChange: "fngChange", fngSearch: "fngSearch" }, host: { listeners: { "document:keydown": "keyhandler($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<div class=\"fwe-search-input fwe-w-100\" (clickOutside)=\"onClickOutside()\" fngClickOutside>\n  <input\n    class=\"fwe-w-100\"\n    #inputElement\n    [attr.disabled]=\"disabled ? '' : null\"\n    [placeholder]=\"label\"\n    (focus)=\"onFocus()\"\n    type=\"search\"\n    (input)=\"onInput($event)\"\n    (search)=\"onSearch($event)\"\n    [value]=\"innerValue\"\n  />\n  <div class=\"fwe-search-icon\"></div>\n  <div class=\"fwe-clear-icon\" (click)=\"clearQuerry()\"></div>\n  <div class=\"fwe-search-suggestions\" *ngIf=\"innerSuggestions?.length && !hideSuggestionList\">\n    <div\n      *ngFor=\"let suggestion of cappedSuggestions; let i = index\"\n      (click)=\"onSuggestionClick(suggestion)\"\n      [class.fwe-selected]=\"selectedSuggestionIndex === i\"\n      class=\"fwe-search-suggestion\"\n    >\n      {{ suggestion }}\n    </div>\n    <div class=\"fwe-ml-xxs\" *ngIf=\"innerSuggestions.length > 10\">...</div>\n  </div>\n</div>\n", styles: [".fwe-w-100{width:100%}\n"], directives: [{ type: ClickOutsideDirective, selector: "[fngClickOutside]", outputs: ["clickOutside"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SearchInputComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-search-input',
-                    templateUrl: './search-input.component.html',
-                    styleUrls: ['./search-input.component.scss'],
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-search-input', encapsulation: ViewEncapsulation.None, template: "<div class=\"fwe-search-input fwe-w-100\" (clickOutside)=\"onClickOutside()\" fngClickOutside>\n  <input\n    class=\"fwe-w-100\"\n    #inputElement\n    [attr.disabled]=\"disabled ? '' : null\"\n    [placeholder]=\"label\"\n    (focus)=\"onFocus()\"\n    type=\"search\"\n    (input)=\"onInput($event)\"\n    (search)=\"onSearch($event)\"\n    [value]=\"innerValue\"\n  />\n  <div class=\"fwe-search-icon\"></div>\n  <div class=\"fwe-clear-icon\" (click)=\"clearQuerry()\"></div>\n  <div class=\"fwe-search-suggestions\" *ngIf=\"innerSuggestions?.length && !hideSuggestionList\">\n    <div\n      *ngFor=\"let suggestion of cappedSuggestions; let i = index\"\n      (click)=\"onSuggestionClick(suggestion)\"\n      [class.fwe-selected]=\"selectedSuggestionIndex === i\"\n      class=\"fwe-search-suggestion\"\n    >\n      {{ suggestion }}\n    </div>\n    <div class=\"fwe-ml-xxs\" *ngIf=\"innerSuggestions.length > 10\">...</div>\n  </div>\n</div>\n", styles: [".fwe-w-100{width:100%}\n"] }]
         }], propDecorators: { inputRef: [{
                 type: ViewChild,
                 args: ['inputElement']
@@ -1579,8 +1508,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
 
 class FestoAngularComponentsModule {
 }
-FestoAngularComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FestoAngularComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularComponentsModule, bootstrap: [PopoverComponent], declarations: [ButtonComponent,
+FestoAngularComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FestoAngularComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularComponentsModule, bootstrap: [PopoverComponent], declarations: [ButtonComponent,
         LinkButtonComponent,
         BreadcrumbComponent,
         LoadingIndicatorComponent,
@@ -1623,8 +1552,8 @@ FestoAngularComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.
         ScrollableDirective,
         SearchInputComponent,
         ClickOutsideDirective] });
-FestoAngularComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularComponentsModule, providers: [], imports: [[RouterModule, CommonModule, OverlayModule, PortalModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularComponentsModule, decorators: [{
+FestoAngularComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularComponentsModule, providers: [], imports: [[RouterModule, CommonModule, OverlayModule, PortalModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularComponentsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -1782,30 +1711,23 @@ class CheckboxComponent {
         }
     }
 }
-CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: CheckboxComponent, selector: "fng-checkbox", inputs: { name: "name", large: "large", valid: "valid", labelPosition: "labelPosition", id: "id", checked: "checked", disabled: "disabled", indeterminate: "indeterminate", value: "value", required: "required" }, outputs: { indeterminateChange: "indeterminateChange", change: "change" }, providers: [
+CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: CheckboxComponent, selector: "fng-checkbox", inputs: { name: "name", large: "large", valid: "valid", labelPosition: "labelPosition", id: "id", checked: "checked", disabled: "disabled", indeterminate: "indeterminate", value: "value", required: "required" }, outputs: { indeterminateChange: "indeterminateChange", change: "change" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => CheckboxComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<label class=\"fwe-checkbox-container\"\n  [class.fng-checkbox-large]=\"large\"\n  [class.fng-checkbox-invalid]=\"!valid || required\"\n  [class.fwe-disabled]=\"disabled\"\n  [class.fng-checkbox-indeterminate]=\"indeterminate\"\n  [class.fwe-checked]=\"checked\"\n  [attr.for]=\"inputId\"\n  [ngClass]=\"{\n    'fwe-label-below': labelPosition == 'below',\n    'fwe-label-before': labelPosition == 'before'\n  }\">\n  <input type=\"checkbox\"\n         [id]=\"inputId\"\n         [required]=\"required\"\n         [disabled]=\"disabled\"\n         [attr.value]=\"value\"\n         [attr.name]=\"name\"\n         [checked]=\"checked\"    \n         (change)=\"onInteractionEvent($event)\"\n         (click)=\"onInputClick($event)\">\n  <div class=\"fwe-checkbox-indicator-container\">\n    <div class=\"fwe-checkbox-indicator-background\"></div>\n    <ng-container *ngIf=\"!indeterminate && checked\">\n      <svg *ngIf=\"large\" width=\"24px\" height=\"24px\">\n        <path d=\"M17.5 7L10 14.5 7.501 12l-1.5 1.501L10 17.5l9-9z\" fill=\"#fff\" />\n      </svg>\n      <svg *ngIf=\"!large\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\">\n        <path d=\"M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z\" fill=\"#fff\" />\n      </svg>\n    </ng-container>\n    <div *ngIf=\"indeterminate && !checked\" class=\"fwe-indeterminate-indicator\"></div>\n  </div>\n  <div class=\"fwe-checkbox-title\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [".fwe-checkbox-container{font-family:\"MetaPro\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;display:flex;flex-direction:row;align-items:flex-start}.fwe-checkbox-container.fwe-label-below{align-items:center;flex-direction:column}.fwe-checkbox-container.fwe-label-below .fwe-checkbox-title{text-align:center;margin:8px 0 0}.fwe-checkbox-container.fwe-label-before{flex-direction:row-reverse;justify-content:flex-end}.fwe-checkbox-container.fwe-label-before .fwe-checkbox-title{margin:0 8px 0 0}.fwe-checkbox-container .fwe-checkbox-indicator-container{margin-top:4px;position:relative}.fwe-checkbox-container input{opacity:0;cursor:pointer;height:0;width:0}.fwe-checkbox-container .fwe-checkbox-title{margin-left:8px;line-height:24px;color:var(--fwe-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fwe-checkbox-container .fwe-checkbox-indicator-background{box-sizing:border-box;background:var(--fwe-white);border:1px solid var(--fwe-text-light);border-radius:2px;height:16px;width:16px;transition:border-width .2s ease-out}.fwe-checkbox-container .fwe-indeterminate-indicator{position:absolute;height:2px;width:10px;top:7px;left:3px;background:white}.fwe-checkbox-container svg{display:block;position:absolute;top:0px;left:0px}.fwe-checkbox-container.fng-checkbox-large .fwe-checkbox-indicator-container{margin-top:0}.fwe-checkbox-container.fng-checkbox-large .fwe-checkbox-indicator-background{height:24px;width:24px;border-radius:4px}.fwe-checkbox-container.fng-checkbox-large .fwe-indeterminate-indicator{top:11px;width:14px;left:5px}.fwe-checkbox-container.fng-checkbox-large.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-large.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{border:12px solid var(--fwe-hero)}.fwe-checkbox-container:hover .fwe-checkbox-indicator-background{background-color:var(--fwe-control)}.fwe-checkbox-container:active .fwe-checkbox-indicator-background{background-color:var(--fwe-control-dark)}.fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{border:8px solid var(--fwe-hero)}.fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate:hover .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-dark)}.fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate:active .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-darker)}.fwe-checkbox-container.fng-checkbox-invalid .fwe-checkbox-indicator-background{border:1px solid var(--fwe-red);background:var(--fwe-white)}.fwe-checkbox-container.fwe-disabled{cursor:default}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background{background-color:var(--fwe-control);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{background-color:var(--fwe-control);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fng-checkbox-invalid .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-title{color:var(--fwe-text-disabled)}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: CheckboxComponent, decorators: [{
+    ], ngImport: i0, template: "<label\n  class=\"fwe-checkbox-container\"\n  [class.fng-checkbox-large]=\"large\"\n  [class.fng-checkbox-invalid]=\"!valid || required\"\n  [class.fwe-disabled]=\"disabled\"\n  [class.fng-checkbox-indeterminate]=\"indeterminate\"\n  [class.fwe-checked]=\"checked\"\n  [attr.for]=\"inputId\"\n  [ngClass]=\"{\n    'fwe-label-below': labelPosition == 'below',\n    'fwe-label-before': labelPosition == 'before'\n  }\"\n>\n  <input\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.value]=\"value\"\n    [attr.name]=\"name\"\n    [checked]=\"checked\"\n    (change)=\"onInteractionEvent($event)\"\n    (click)=\"onInputClick($event)\"\n  />\n  <div class=\"fwe-checkbox-indicator-container\">\n    <div class=\"fwe-checkbox-indicator-background\"></div>\n    <ng-container *ngIf=\"!indeterminate && checked\">\n      <svg *ngIf=\"large\" width=\"24px\" height=\"24px\">\n        <path d=\"M17.5 7L10 14.5 7.501 12l-1.5 1.501L10 17.5l9-9z\" fill=\"#fff\" />\n      </svg>\n      <svg *ngIf=\"!large\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\">\n        <path d=\"M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z\" fill=\"#fff\" />\n      </svg>\n    </ng-container>\n    <div *ngIf=\"indeterminate && !checked\" class=\"fwe-indeterminate-indicator\"></div>\n  </div>\n  <div class=\"fwe-checkbox-title\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [".fwe-checkbox-container{font-family:MetaPro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;flex-direction:row;align-items:flex-start}.fwe-checkbox-container.fwe-label-below{align-items:center;flex-direction:column}.fwe-checkbox-container.fwe-label-below .fwe-checkbox-title{text-align:center;margin:8px 0 0}.fwe-checkbox-container.fwe-label-before{flex-direction:row-reverse;justify-content:flex-end}.fwe-checkbox-container.fwe-label-before .fwe-checkbox-title{margin:0 8px 0 0}.fwe-checkbox-container .fwe-checkbox-indicator-container{margin-top:4px;position:relative}.fwe-checkbox-container input{opacity:0;cursor:pointer;height:0;width:0}.fwe-checkbox-container .fwe-checkbox-title{margin-left:8px;line-height:24px;color:var(--fwe-text);-webkit-user-select:none;user-select:none}.fwe-checkbox-container .fwe-checkbox-indicator-background{box-sizing:border-box;background:var(--fwe-white);border:1px solid var(--fwe-text-light);border-radius:2px;height:16px;width:16px;transition:border-width .2s ease-out}.fwe-checkbox-container .fwe-indeterminate-indicator{position:absolute;height:2px;width:10px;top:7px;left:3px;background:white}.fwe-checkbox-container svg{display:block;position:absolute;top:0px;left:0px}.fwe-checkbox-container.fng-checkbox-large .fwe-checkbox-indicator-container{margin-top:0}.fwe-checkbox-container.fng-checkbox-large .fwe-checkbox-indicator-background{height:24px;width:24px;border-radius:4px}.fwe-checkbox-container.fng-checkbox-large .fwe-indeterminate-indicator{top:11px;width:14px;left:5px}.fwe-checkbox-container.fng-checkbox-large.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-large.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{border:12px solid var(--fwe-hero)}.fwe-checkbox-container:hover .fwe-checkbox-indicator-background{background-color:var(--fwe-control)}.fwe-checkbox-container:active .fwe-checkbox-indicator-background{background-color:var(--fwe-control-dark)}.fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{border:8px solid var(--fwe-hero)}.fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate:hover .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-dark)}.fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate:active .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-darker)}.fwe-checkbox-container.fng-checkbox-invalid .fwe-checkbox-indicator-background{border:1px solid var(--fwe-red);background:var(--fwe-white)}.fwe-checkbox-container.fwe-disabled{cursor:default}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-disabled.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{background-color:var(--fwe-control);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fng-checkbox-invalid .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-title{color:var(--fwe-text-disabled)}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-checkbox',
-                    templateUrl: './checkbox.component.html',
-                    styleUrls: ['./checkbox.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    providers: [
+            args: [{ selector: 'fng-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => CheckboxComponent),
                             multi: true
                         }
-                    ]
-                }]
+                    ], template: "<label\n  class=\"fwe-checkbox-container\"\n  [class.fng-checkbox-large]=\"large\"\n  [class.fng-checkbox-invalid]=\"!valid || required\"\n  [class.fwe-disabled]=\"disabled\"\n  [class.fng-checkbox-indeterminate]=\"indeterminate\"\n  [class.fwe-checked]=\"checked\"\n  [attr.for]=\"inputId\"\n  [ngClass]=\"{\n    'fwe-label-below': labelPosition == 'below',\n    'fwe-label-before': labelPosition == 'before'\n  }\"\n>\n  <input\n    type=\"checkbox\"\n    [id]=\"inputId\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [attr.value]=\"value\"\n    [attr.name]=\"name\"\n    [checked]=\"checked\"\n    (change)=\"onInteractionEvent($event)\"\n    (click)=\"onInputClick($event)\"\n  />\n  <div class=\"fwe-checkbox-indicator-container\">\n    <div class=\"fwe-checkbox-indicator-background\"></div>\n    <ng-container *ngIf=\"!indeterminate && checked\">\n      <svg *ngIf=\"large\" width=\"24px\" height=\"24px\">\n        <path d=\"M17.5 7L10 14.5 7.501 12l-1.5 1.501L10 17.5l9-9z\" fill=\"#fff\" />\n      </svg>\n      <svg *ngIf=\"!large\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\">\n        <path d=\"M6 12L3 9l1.25-1.25L6 9.5l5.75-5.75L13 5l-7 7z\" fill=\"#fff\" />\n      </svg>\n    </ng-container>\n    <div *ngIf=\"indeterminate && !checked\" class=\"fwe-indeterminate-indicator\"></div>\n  </div>\n  <div class=\"fwe-checkbox-title\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [".fwe-checkbox-container{font-family:MetaPro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";-webkit-user-select:none;user-select:none;cursor:pointer;display:flex;flex-direction:row;align-items:flex-start}.fwe-checkbox-container.fwe-label-below{align-items:center;flex-direction:column}.fwe-checkbox-container.fwe-label-below .fwe-checkbox-title{text-align:center;margin:8px 0 0}.fwe-checkbox-container.fwe-label-before{flex-direction:row-reverse;justify-content:flex-end}.fwe-checkbox-container.fwe-label-before .fwe-checkbox-title{margin:0 8px 0 0}.fwe-checkbox-container .fwe-checkbox-indicator-container{margin-top:4px;position:relative}.fwe-checkbox-container input{opacity:0;cursor:pointer;height:0;width:0}.fwe-checkbox-container .fwe-checkbox-title{margin-left:8px;line-height:24px;color:var(--fwe-text);-webkit-user-select:none;user-select:none}.fwe-checkbox-container .fwe-checkbox-indicator-background{box-sizing:border-box;background:var(--fwe-white);border:1px solid var(--fwe-text-light);border-radius:2px;height:16px;width:16px;transition:border-width .2s ease-out}.fwe-checkbox-container .fwe-indeterminate-indicator{position:absolute;height:2px;width:10px;top:7px;left:3px;background:white}.fwe-checkbox-container svg{display:block;position:absolute;top:0px;left:0px}.fwe-checkbox-container.fng-checkbox-large .fwe-checkbox-indicator-container{margin-top:0}.fwe-checkbox-container.fng-checkbox-large .fwe-checkbox-indicator-background{height:24px;width:24px;border-radius:4px}.fwe-checkbox-container.fng-checkbox-large .fwe-indeterminate-indicator{top:11px;width:14px;left:5px}.fwe-checkbox-container.fng-checkbox-large.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-large.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{border:12px solid var(--fwe-hero)}.fwe-checkbox-container:hover .fwe-checkbox-indicator-background{background-color:var(--fwe-control)}.fwe-checkbox-container:active .fwe-checkbox-indicator-background{background-color:var(--fwe-control-dark)}.fwe-checkbox-container.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{border:8px solid var(--fwe-hero)}.fwe-checkbox-container.fwe-checked:hover .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate:hover .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-dark)}.fwe-checkbox-container.fwe-checked:active .fwe-checkbox-indicator-background,.fwe-checkbox-container.fng-checkbox-indeterminate:active .fwe-checkbox-indicator-background{border-color:var(--fwe-hero-darker)}.fwe-checkbox-container.fng-checkbox-invalid .fwe-checkbox-indicator-background{border:1px solid var(--fwe-red);background:var(--fwe-white)}.fwe-checkbox-container.fwe-disabled{cursor:default}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fwe-checked .fwe-checkbox-indicator-background,.fwe-checkbox-container.fwe-disabled.fng-checkbox-indeterminate .fwe-checkbox-indicator-background{background-color:var(--fwe-control);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled.fng-checkbox-invalid .fwe-checkbox-indicator-background{background-color:var(--fwe-white);border:1px solid var(--fwe-control)}.fwe-checkbox-container.fwe-disabled .fwe-checkbox-title{color:var(--fwe-text-disabled)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { name: [{
                 type: Input
             }], large: [{
@@ -1910,30 +1832,23 @@ class SwitchComponent {
         }
     }
 }
-SwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: SwitchComponent, selector: "fng-switch", inputs: { name: "name", large: "large", labelPosition: "labelPosition", id: "id", checked: "checked", disabled: "disabled", value: "value", required: "required" }, outputs: { change: "change" }, providers: [
+SwitchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SwitchComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SwitchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: SwitchComponent, selector: "fng-switch", inputs: { name: "name", large: "large", labelPosition: "labelPosition", id: "id", checked: "checked", disabled: "disabled", value: "value", required: "required" }, outputs: { change: "change" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => SwitchComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<label\n  [ngClass]=\"{\n    'fwe-switch-container': true,\n    'fwe-checked': checked,\n    'fwe-disabled': disabled,\n    'fwe-switch-label-below': labelPosition == 'below',\n    'fwe-switch-label-before': labelPosition == 'before',\n    'fwe-switch-lg': large\n  }\"\n>\n  <input\n    title=\"checkbox\"\n    type=\"checkbox\"\n    [checked]=\"checked\"    \n    [attr.value]=\"value\"\n    [attr.name]=\"name\"\n    (change)=\"onInteractionEvent($event)\"\n    (click)=\"onInputClick($event)\"\n    [disabled]=\"disabled\"\n  />\n  <div class=\"fwe-switch-track\"></div>\n  <div class=\"fwe-switch-label-content\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [".fwe-switch-container.fwe-switch-label-before{flex-direction:row-reverse;justify-content:flex-end}.fwe-switch-container.fwe-switch-label-before .fwe-switch-label-content{margin-left:0;margin-right:8px}.fwe-switch-container.fwe-switch-label-below{flex-direction:column}.fwe-switch-container.fwe-switch-label-below .fwe-switch-label-content{margin:8px 0 0}.fwe-switch-container.fwe-switch-label-below .fwe-switch-track{margin-top:0;margin-bottom:0}.fwe-switch-container{cursor:pointer;display:flex;align-items:center;white-space:nowrap;vertical-align:middle;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fwe-switch-container .fwe-switch-track{box-sizing:border-box;position:relative;height:16px;width:32px;border:none;background-color:var(--fwe-control-border);border-radius:8px;margin-top:4px;margin-bottom:4px}.fwe-switch-container .fwe-switch-track:after{content:\"\";position:absolute;top:3px;left:3px;height:10px;width:10px;background:var(--fwe-white);border-radius:50%;transition:left .2s}.fwe-switch-container.fwe-switch-lg .fwe-switch-track{height:24px;width:48px;border-radius:12px;margin-top:0;margin-bottom:0}.fwe-switch-container.fwe-switch-lg .fwe-switch-track:after{top:5px;left:5px;height:14px;width:14px}.fwe-switch-container.fwe-switch-lg.fwe-checked .fwe-switch-track:after{left:29px}.fwe-switch-container .fwe-switch-label-content{line-height:24px;margin-left:8px}.fwe-switch-container input[type=checkbox]{height:0px;width:0px;opacity:0;cursor:pointer}.fwe-switch-container:hover .fwe-switch-track{background-color:var(--fwe-control-border-dark)}.fwe-switch-container:active .fwe-switch-track{background-color:var(--fwe-control-border-darker)}.fwe-switch-container.fwe-checked .fwe-switch-track{background-color:var(--fwe-caerul)}.fwe-switch-container.fwe-checked .fwe-switch-track:after{left:19px}.fwe-switch-container:hover.fwe-checked .fwe-switch-track{background-color:var(--fwe-hero-dark)}.fwe-switch-container:active.fwe-checked .fwe-switch-track{background-color:var(--fwe-hero-darker)}.fwe-switch-container.fwe-disabled .fwe-switch-track{background-color:var(--fwe-control-disabled);cursor:not-allowed}.fwe-switch-container.fwe-disabled.fwe-checked .fwe-switch-track{background-color:var(--fwe-control-disabled);cursor:not-allowed}.fwe-switch-container.fwe-disabled{cursor:not-allowed}.fwe-switch-container.fwe-disabled .fwe-switch-label-content{color:var(--fwe-text-disabled);cursor:not-allowed}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SwitchComponent, decorators: [{
+    ], ngImport: i0, template: "<label\n  [ngClass]=\"{\n    'fwe-switch-container': true,\n    'fwe-checked': checked,\n    'fwe-disabled': disabled,\n    'fwe-switch-label-below': labelPosition == 'below',\n    'fwe-switch-label-before': labelPosition == 'before',\n    'fwe-switch-lg': large\n  }\"\n>\n  <input\n    title=\"checkbox\"\n    type=\"checkbox\"\n    [checked]=\"checked\"\n    [attr.value]=\"value\"\n    [attr.name]=\"name\"\n    (change)=\"onInteractionEvent($event)\"\n    (click)=\"onInputClick($event)\"\n    [disabled]=\"disabled\"\n  />\n  <div class=\"fwe-switch-track\"></div>\n  <div class=\"fwe-switch-label-content\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [".fwe-switch-container.fwe-switch-label-before{flex-direction:row-reverse;justify-content:flex-end}.fwe-switch-container.fwe-switch-label-before .fwe-switch-label-content{margin-left:0;margin-right:8px}.fwe-switch-container.fwe-switch-label-below{flex-direction:column}.fwe-switch-container.fwe-switch-label-below .fwe-switch-label-content{margin:8px 0 0}.fwe-switch-container.fwe-switch-label-below .fwe-switch-track{margin-top:0;margin-bottom:0}.fwe-switch-container{cursor:pointer;display:flex;align-items:center;white-space:nowrap;vertical-align:middle;width:100%;-webkit-user-select:none;user-select:none}.fwe-switch-container .fwe-switch-track{box-sizing:border-box;position:relative;height:16px;width:32px;border:none;background-color:var(--fwe-control-border);border-radius:8px;margin-top:4px;margin-bottom:4px}.fwe-switch-container .fwe-switch-track:after{content:\"\";position:absolute;top:3px;left:3px;height:10px;width:10px;background:var(--fwe-white);border-radius:50%;transition:left .2s}.fwe-switch-container.fwe-switch-lg .fwe-switch-track{height:24px;width:48px;border-radius:12px;margin-top:0;margin-bottom:0}.fwe-switch-container.fwe-switch-lg .fwe-switch-track:after{top:5px;left:5px;height:14px;width:14px}.fwe-switch-container.fwe-switch-lg.fwe-checked .fwe-switch-track:after{left:29px}.fwe-switch-container .fwe-switch-label-content{line-height:24px;margin-left:8px}.fwe-switch-container input[type=checkbox]{height:0px;width:0px;opacity:0;cursor:pointer}.fwe-switch-container:hover .fwe-switch-track{background-color:var(--fwe-control-border-dark)}.fwe-switch-container:active .fwe-switch-track{background-color:var(--fwe-control-border-darker)}.fwe-switch-container.fwe-checked .fwe-switch-track{background-color:var(--fwe-caerul)}.fwe-switch-container.fwe-checked .fwe-switch-track:after{left:19px}.fwe-switch-container:hover.fwe-checked .fwe-switch-track{background-color:var(--fwe-hero-dark)}.fwe-switch-container:active.fwe-checked .fwe-switch-track{background-color:var(--fwe-hero-darker)}.fwe-switch-container.fwe-disabled .fwe-switch-track,.fwe-switch-container.fwe-disabled.fwe-checked .fwe-switch-track{background-color:var(--fwe-control-disabled);cursor:not-allowed}.fwe-switch-container.fwe-disabled{cursor:not-allowed}.fwe-switch-container.fwe-disabled .fwe-switch-label-content{color:var(--fwe-text-disabled);cursor:not-allowed}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SwitchComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-switch',
-                    templateUrl: './switch.component.html',
-                    styleUrls: ['./switch.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    providers: [
+            args: [{ selector: 'fng-switch', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SwitchComponent),
                             multi: true
                         }
-                    ]
-                }]
+                    ], template: "<label\n  [ngClass]=\"{\n    'fwe-switch-container': true,\n    'fwe-checked': checked,\n    'fwe-disabled': disabled,\n    'fwe-switch-label-below': labelPosition == 'below',\n    'fwe-switch-label-before': labelPosition == 'before',\n    'fwe-switch-lg': large\n  }\"\n>\n  <input\n    title=\"checkbox\"\n    type=\"checkbox\"\n    [checked]=\"checked\"\n    [attr.value]=\"value\"\n    [attr.name]=\"name\"\n    (change)=\"onInteractionEvent($event)\"\n    (click)=\"onInputClick($event)\"\n    [disabled]=\"disabled\"\n  />\n  <div class=\"fwe-switch-track\"></div>\n  <div class=\"fwe-switch-label-content\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [".fwe-switch-container.fwe-switch-label-before{flex-direction:row-reverse;justify-content:flex-end}.fwe-switch-container.fwe-switch-label-before .fwe-switch-label-content{margin-left:0;margin-right:8px}.fwe-switch-container.fwe-switch-label-below{flex-direction:column}.fwe-switch-container.fwe-switch-label-below .fwe-switch-label-content{margin:8px 0 0}.fwe-switch-container.fwe-switch-label-below .fwe-switch-track{margin-top:0;margin-bottom:0}.fwe-switch-container{cursor:pointer;display:flex;align-items:center;white-space:nowrap;vertical-align:middle;width:100%;-webkit-user-select:none;user-select:none}.fwe-switch-container .fwe-switch-track{box-sizing:border-box;position:relative;height:16px;width:32px;border:none;background-color:var(--fwe-control-border);border-radius:8px;margin-top:4px;margin-bottom:4px}.fwe-switch-container .fwe-switch-track:after{content:\"\";position:absolute;top:3px;left:3px;height:10px;width:10px;background:var(--fwe-white);border-radius:50%;transition:left .2s}.fwe-switch-container.fwe-switch-lg .fwe-switch-track{height:24px;width:48px;border-radius:12px;margin-top:0;margin-bottom:0}.fwe-switch-container.fwe-switch-lg .fwe-switch-track:after{top:5px;left:5px;height:14px;width:14px}.fwe-switch-container.fwe-switch-lg.fwe-checked .fwe-switch-track:after{left:29px}.fwe-switch-container .fwe-switch-label-content{line-height:24px;margin-left:8px}.fwe-switch-container input[type=checkbox]{height:0px;width:0px;opacity:0;cursor:pointer}.fwe-switch-container:hover .fwe-switch-track{background-color:var(--fwe-control-border-dark)}.fwe-switch-container:active .fwe-switch-track{background-color:var(--fwe-control-border-darker)}.fwe-switch-container.fwe-checked .fwe-switch-track{background-color:var(--fwe-caerul)}.fwe-switch-container.fwe-checked .fwe-switch-track:after{left:19px}.fwe-switch-container:hover.fwe-checked .fwe-switch-track{background-color:var(--fwe-hero-dark)}.fwe-switch-container:active.fwe-checked .fwe-switch-track{background-color:var(--fwe-hero-darker)}.fwe-switch-container.fwe-disabled .fwe-switch-track,.fwe-switch-container.fwe-disabled.fwe-checked .fwe-switch-track{background-color:var(--fwe-control-disabled);cursor:not-allowed}.fwe-switch-container.fwe-disabled{cursor:not-allowed}.fwe-switch-container.fwe-disabled .fwe-switch-label-content{color:var(--fwe-text-disabled);cursor:not-allowed}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { name: [{
                 type: Input
             }], large: [{
@@ -1984,9 +1899,9 @@ class UniqueSelectionDispatcher {
         this.listeners = [];
     }
 }
-UniqueSelectionDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: UniqueSelectionDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-UniqueSelectionDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: UniqueSelectionDispatcher, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: UniqueSelectionDispatcher, decorators: [{
+UniqueSelectionDispatcher.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: UniqueSelectionDispatcher, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+UniqueSelectionDispatcher.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: UniqueSelectionDispatcher, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: UniqueSelectionDispatcher, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -2132,15 +2047,15 @@ class RadioGroupDirective {
         }
     }
 }
-RadioGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: RadioGroupDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
-RadioGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.0", type: RadioGroupDirective, selector: "[fngRadioGroup]", inputs: { name: "name", large: "large", labelPosition: "labelPosition", value: "value", selected: "selected", disabled: "disabled", required: "required" }, outputs: { change: "change" }, host: { properties: { "class.fwe-radio-group": "this.hostClass", "attr.role": "this.role" } }, providers: [
+RadioGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: RadioGroupDirective, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive });
+RadioGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: RadioGroupDirective, selector: "[fngRadioGroup]", inputs: { name: "name", large: "large", labelPosition: "labelPosition", value: "value", selected: "selected", disabled: "disabled", required: "required" }, outputs: { change: "change" }, host: { properties: { "class.fwe-radio-group": "this.hostClass", "attr.role": "this.role" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => RadioGroupDirective),
             multi: true
         }
-    ], queries: [{ propertyName: "radios", predicate: RadioComponent, descendants: true }], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: RadioGroupDirective, decorators: [{
+    ], queries: [{ propertyName: "radios", predicate: i0.forwardRef(function () { return RadioComponent; }), descendants: true }], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: RadioGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fngRadioGroup]',
@@ -2304,20 +2219,16 @@ class RadioComponent {
         this.change.emit(new RadioChange(this, this.innerValue));
     }
 }
-RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: RadioComponent, deps: [{ token: RadioGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }, { token: UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Component });
-RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: RadioComponent, selector: "fng-radio", inputs: { name: "name", id: "id", checked: "checked", value: "value", large: "large", labelPosition: "labelPosition", disabled: "disabled", required: "required" }, outputs: { change: "change" }, ngImport: i0, template: "<label\n  [attr.for]=\"inputId\"\n  [ngClass]=\"{\n    'fwe-radio': true,\n    'fwe-radio-label-below': labelPosition == 'below',\n    'fwe-radio-label-before': labelPosition == 'before',\n    'fwe-radio-lg': large\n  }\"\n>\n  <input\n    type=\"radio\"\n    [id]=\"inputId\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [required]=\"required\"\n    (change)=\"onInputChange($event)\"\n    (click)=\"onInputClick($event)\"\n  />\n  <div class=\"fwe-radio-checkmark\"></div>\n  <div class=\"fwe-radio-label-content\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [".fwe-radio:hover .fwe-radio-checkmark{background-color:var(--fwe-control)}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: RadioComponent, decorators: [{
+RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: RadioComponent, deps: [{ token: RadioGroupDirective, optional: true }, { token: i0.ChangeDetectorRef }, { token: UniqueSelectionDispatcher }], target: i0.ɵɵFactoryTarget.Component });
+RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: RadioComponent, selector: "fng-radio", inputs: { name: "name", id: "id", checked: "checked", value: "value", large: "large", labelPosition: "labelPosition", disabled: "disabled", required: "required" }, outputs: { change: "change" }, ngImport: i0, template: "<label\n  [attr.for]=\"inputId\"\n  [ngClass]=\"{\n    'fwe-radio': true,\n    'fwe-radio-label-below': labelPosition == 'below',\n    'fwe-radio-label-before': labelPosition == 'before',\n    'fwe-radio-lg': large\n  }\"\n>\n  <input\n    type=\"radio\"\n    [id]=\"inputId\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [required]=\"required\"\n    (change)=\"onInputChange($event)\"\n    (click)=\"onInputClick($event)\"\n  />\n  <div class=\"fwe-radio-checkmark\"></div>\n  <div class=\"fwe-radio-label-content\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [".fwe-radio:hover .fwe-radio-checkmark{background-color:var(--fwe-control)}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-radio',
-                    templateUrl: './radio.component.html',
-                    styleUrls: ['./radio.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], ctorParameters: function () { return [{ type: RadioGroupDirective, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }, { type: UniqueSelectionDispatcher }]; }, propDecorators: { name: [{
+            args: [{ selector: 'fng-radio', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<label\n  [attr.for]=\"inputId\"\n  [ngClass]=\"{\n    'fwe-radio': true,\n    'fwe-radio-label-below': labelPosition == 'below',\n    'fwe-radio-label-before': labelPosition == 'before',\n    'fwe-radio-lg': large\n  }\"\n>\n  <input\n    type=\"radio\"\n    [id]=\"inputId\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n    [attr.name]=\"name\"\n    [attr.value]=\"value\"\n    [required]=\"required\"\n    (change)=\"onInputChange($event)\"\n    (click)=\"onInputClick($event)\"\n  />\n  <div class=\"fwe-radio-checkmark\"></div>\n  <div class=\"fwe-radio-label-content\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [".fwe-radio:hover .fwe-radio-checkmark{background-color:var(--fwe-control)}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: RadioGroupDirective, decorators: [{
+                        type: Optional
+                    }] }, { type: i0.ChangeDetectorRef }, { type: UniqueSelectionDispatcher }];
+    }, propDecorators: { name: [{
                 type: Input
             }], id: [{
                 type: Input
@@ -2347,15 +2258,11 @@ class SelectOptionComponent {
         });
     }
 }
-SelectOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: SelectOptionComponent, selector: "fng-select-option", inputs: { value: "value" }, viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["root"], descendants: true }], ngImport: i0, template: "<span #root>\n  <ng-content></ng-content>\n</span>\n", styles: [""] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SelectOptionComponent, decorators: [{
+SelectOptionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SelectOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectOptionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: SelectOptionComponent, selector: "fng-select-option", inputs: { value: "value" }, viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["root"], descendants: true }], ngImport: i0, template: "<span #root>\n  <ng-content></ng-content>\n</span>\n", styles: [""] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SelectOptionComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-select-option',
-                    templateUrl: './select-option.component.html',
-                    styleUrls: ['./select-option.component.scss']
-                }]
+            args: [{ selector: 'fng-select-option', template: "<span #root>\n  <ng-content></ng-content>\n</span>\n", styles: [""] }]
         }], propDecorators: { value: [{
                 type: Input
             }], elementRef: [{
@@ -2385,9 +2292,9 @@ class ChipTextPipe {
         return chipText;
     }
 }
-ChipTextPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ChipTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-ChipTextPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ChipTextPipe, name: "fngChipText", pure: false });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ChipTextPipe, decorators: [{
+ChipTextPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChipTextPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+ChipTextPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChipTextPipe, name: "fngChipText", pure: false });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ChipTextPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'fngChipText',
@@ -2586,33 +2493,29 @@ class SelectComponent {
     }
 }
 SelectComponent.nextId = 0;
-SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SelectComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: SelectComponent, selector: "fng-select", inputs: { disabled: "disabled", required: "required", multiple: "multiple", size: "size", options: "options", optionsValueKey: "optionsValueKey", optionsTextKey: "optionsTextKey", optionObjectAsValue: "optionObjectAsValue", error: "error", label: "label", hideLabel: "hideLabel", hint: "hint", resetOption: "resetOption" }, outputs: { fngChange: "fngChange" }, host: { properties: { "id": "this.id" } }, providers: [
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SelectComponent, deps: [{ token: DOCUMENT }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: SelectComponent, selector: "fng-select", inputs: { disabled: "disabled", required: "required", multiple: "multiple", size: "size", options: "options", optionsValueKey: "optionsValueKey", optionsTextKey: "optionsTextKey", optionObjectAsValue: "optionObjectAsValue", error: "error", label: "label", hideLabel: "hideLabel", hint: "hint", resetOption: "resetOption" }, outputs: { fngChange: "fngChange" }, host: { properties: { "id": "this.id" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => SelectComponent),
             multi: true
         }
-    ], queries: [{ propertyName: "fngSelectOptions", predicate: SelectOptionComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["div"], descendants: true }], ngImport: i0, template: "<div #div class=\"fwe-select-wrapper\" [class.fwe-disabled]=\"disabled\" [class.fng-hide-label]=\"hideLabel\">\n  <div\n    class=\"fwe-select\"\n    (click)=\"toggle()\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    [class.fwe-focus]=\"showOptions\"\n    [class.fwe-required]=\"required\"\n    [class.fwe-disabled]=\"disabled\"\n    [class.fwe-pty]=\"empty\"\n  >\n    <div class=\"fwe-select-content\">\n      <ng-container *ngIf=\"!multiple; else chips\">\n        {{ value != null && value | fngChipText: options:optionsValueKey:optionsTextKey }}\n      </ng-container>\n      <ng-template #chips>\n        <div class=\"fwe-chip-container\">\n          <div\n            *ngFor=\"let v of value\"\n            class=\"fwe-chip chip-text-truncate fwe-pr-4\"\n            [style.max-width.px]=\"triggerWidth\"\n            [title]=\"v | fngChipText: options:optionsValueKey:optionsTextKey\"\n          >\n            {{ v | fngChipText: options:optionsValueKey:optionsTextKey }}\n            <span class=\"chip-removable\" (click)=\"removeChip($event, v)\"></span>\n          </div>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayMinWidth]=\"triggerWidth\"\n    [cdkConnectedOverlayOpen]=\"showOptions\"\n    [cdkConnectedOverlayPanelClass]=\"selectPanelClasses\"\n    (backdropClick)=\"close()\"\n  >\n    <div class=\"fng-select-panel-wrap\">\n      <ul class=\"fwe-select-options-container\">\n        <li class=\"fwe-select-option\" *ngIf=\"resetOption != null && !multiple\" (click)=\"select(null, $event)\">{{ resetOption }}</li>\n        <li\n          class=\"fwe-select-option\"\n          *ngFor=\"let option of options; let i = index\"\n          (click)=\"select(getOptionValue(i), $event)\"\n          [title]=\"getOptionText(i) || option?.text\"\n        >\n          <span class=\"fwe-select-option-content\">\n            <span\n              *ngIf=\"multiple\"\n              class=\"fng-select-pseudo-checkbox\"\n              [ngClass]=\"{ 'fng-select-pseudo-checkbox-checked': checked.get(getOptionValue(i)) === 'checked' }\"\n            ></span>\n            <span *ngIf=\"hasProjectedOptions; else defaultTemplate\" [innerHTML]=\"projectedHtml[i]\"></span>\n            <ng-template #defaultTemplate>{{ getOptionText(i) || option?.text }}</ng-template>\n          </span>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n  <label class=\"fwe-select-label\" [for]=\"id\" [class.fwe-sr-only]=\"hideLabel\">{{ label }}</label>\n  <div class=\"fwe-select-description\" *ngIf=\"hint\">\n    {{ hint }}\n  </div>\n  <div class=\"fwe-select-invalid\" *ngIf=\"error\">\n    {{ error }}\n  </div>\n</div>\n<div class=\"fwe-d-none\" (cdkObserveContent)=\"onContentChange($event)\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.fng-select-panel-open .fng-select-panel{opacity:1!important}fng-select{width:auto}fng-select.ng-invalid:not(.ng-pristine) .fwe-select:hover{border-color:var(--fwe-red)}fng-select.ng-invalid:not(.ng-pristine) .fwe-select.fwe-required~.fwe-select-invalid{display:block}fng-select.ng-invalid:not(.ng-pristine) .fwe-select.fwe-required~.fwe-select-description{display:none}.fng-select-panel{opacity:0!important}.fng-select-panel.fng-select-panel-options-3 .fwe-select-options-container{max-height:162px}.fng-select-panel.fng-select-panel-options-4 .fwe-select-options-container{max-height:210px}.fng-select-panel.fng-select-panel-options-5 .fwe-select-options-container{max-height:258px}.fng-select-panel.fng-select-panel-options-6 .fwe-select-options-container{max-height:306px}.fng-select-panel.fng-select-panel-options-7 .fwe-select-options-container{max-height:354px}.fng-select-panel.fng-select-panel-options-8 .fwe-select-options-container{max-height:402px}.fng-select-panel.fng-select-panel-options-9 .fwe-select-options-container{max-height:450px}.fng-select-panel.fng-select-panel-options-10 .fwe-select-options-container{max-height:498px}.fng-select-panel .fwe-select-options-container{scrollbar-width:thin;scrollbar-color:var(--fwe-control-scrollbar) var(--fwe-gray-100)}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar{width:12px}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar-track{background:transparent}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar-thumb{overflow:visible;background-color:var(--fwe-control-scrollbar);border:3px solid rgba(242,243,245,0);-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:6px}.fng-select-panel-wrap{flex-basis:100%}.fwe-select-options-container{position:relative;top:4px;left:0px;max-height:258px;min-width:calc(100% + 0px)!important;max-width:280px;overflow:auto;font-size:16px;background-color:var(--fwe-white);border-radius:4px;padding:8px;margin:0;border:1px solid var(--fwe-gray-200);box-shadow:0 1px 4px #00000029;list-style:none;outline:0}.fwe-select-options-container .fwe-select-option{position:relative;line-height:24px;padding:12px 8px;min-height:24px;cursor:pointer}.fwe-select-options-container .fwe-select-option:hover{background-color:var(--fwe-gray-100)}.fwe-select-options-container .fwe-select-option:last-child{border-bottom:none}.fwe-select-options-container .fwe-select-option .fwe-select-option-content{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:24px;min-height:24px}.fng-select-pseudo-checkbox{width:16px;height:16px;border-radius:2px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;color:var(--fwe-control-border);border:1px solid;transition:none;margin-right:12px;top:-1px}.fng-select-pseudo-checkbox:after{color:var(--fwe-white);position:absolute;display:block;opacity:0;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.fng-select-pseudo-checkbox.fng-select-pseudo-checkbox-checked{background:var(--fwe-caerul);border:1px solid var(--fwe-caerul)}.fng-select-pseudo-checkbox.fng-select-pseudo-checkbox-checked:after{top:3px;left:2px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box}.chip-text-truncate{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-removable:after{position:absolute;right:5px;top:4px;color:var(--fwe-text);font-family:\"festo_icons-16\";font-size:16px;content:\"\\ea1c\";line-height:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fwe-select-wrapper{display:flex;width:inherit;min-width:48px}.fwe-select-wrapper:before{bottom:unset;top:24px}.fwe-select-wrapper.fng-hide-label{margin-top:18px}.fwe-select-wrapper.fng-hide-label:before{top:6px}.fwe-select-wrapper.fwe-disabled:before{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select{cursor:pointer;height:unset;min-height:33px}.fwe-select-wrapper .fwe-select .fwe-select-content{padding-right:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5rem}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled)~.fwe-select-label:after{position:relative;left:3px;display:inline-block;content:\"*\"}.fwe-select-wrapper .fwe-select.fwe-disabled{cursor:default;border-color:var(--fwe-control-disabled)!important}.fwe-select-wrapper .fwe-select.fwe-disabled~.fwe-select-label{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip{color:var(--fwe-text-disabled);border:1px solid var(--fwe-control-disabled);pointer-events:none}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip .chip-removable:after{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select-label:empty~.fwe-select-options-container,.fwe-select-wrapper .fwe-select-label.fwe-sr-only~.fwe-select-options-container{top:38px}\n"], directives: [{ type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayPositions", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayTransformOriginOn"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], pipes: { "fngChipText": ChipTextPipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SelectComponent, decorators: [{
+    ], queries: [{ propertyName: "fngSelectOptions", predicate: SelectOptionComponent }], viewQueries: [{ propertyName: "elementRef", first: true, predicate: ["div"], descendants: true }], ngImport: i0, template: "<div #div class=\"fwe-select-wrapper\" [class.fwe-disabled]=\"disabled\" [class.fng-hide-label]=\"hideLabel\">\n  <div\n    class=\"fwe-select\"\n    (click)=\"toggle()\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    [class.fwe-focus]=\"showOptions\"\n    [class.fwe-required]=\"required\"\n    [class.fwe-disabled]=\"disabled\"\n    [class.fwe-pty]=\"empty\"\n  >\n    <div class=\"fwe-select-content\">\n      <ng-container *ngIf=\"!multiple; else chips\">\n        {{ value != null && value | fngChipText: options:optionsValueKey:optionsTextKey }}\n      </ng-container>\n      <ng-template #chips>\n        <div class=\"fwe-chip-container\">\n          <div\n            *ngFor=\"let v of value\"\n            class=\"fwe-chip chip-text-truncate fwe-pr-4\"\n            [style.max-width.px]=\"triggerWidth\"\n            [title]=\"v | fngChipText: options:optionsValueKey:optionsTextKey\"\n          >\n            {{ v | fngChipText: options:optionsValueKey:optionsTextKey }}\n            <span class=\"chip-removable\" (click)=\"removeChip($event, v)\"></span>\n          </div>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayMinWidth]=\"triggerWidth\"\n    [cdkConnectedOverlayOpen]=\"showOptions\"\n    [cdkConnectedOverlayPanelClass]=\"selectPanelClasses\"\n    (backdropClick)=\"close()\"\n  >\n    <div class=\"fng-select-panel-wrap\">\n      <ul class=\"fwe-select-options-container\">\n        <li class=\"fwe-select-option\" *ngIf=\"resetOption != null && !multiple\" (click)=\"select(null, $event)\">{{ resetOption }}</li>\n        <li\n          class=\"fwe-select-option\"\n          *ngFor=\"let option of options; let i = index\"\n          (click)=\"select(getOptionValue(i), $event)\"\n          [title]=\"getOptionText(i) || option?.text\"\n        >\n          <span class=\"fwe-select-option-content\">\n            <span\n              *ngIf=\"multiple\"\n              class=\"fng-select-pseudo-checkbox\"\n              [ngClass]=\"{ 'fng-select-pseudo-checkbox-checked': checked.get(getOptionValue(i)) === 'checked' }\"\n            ></span>\n            <span *ngIf=\"hasProjectedOptions; else defaultTemplate\" [innerHTML]=\"projectedHtml[i]\"></span>\n            <ng-template #defaultTemplate>{{ getOptionText(i) || option?.text }}</ng-template>\n          </span>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n  <label class=\"fwe-select-label\" [for]=\"id\" [class.fwe-sr-only]=\"hideLabel\">{{ label }}</label>\n  <div class=\"fwe-select-description\" *ngIf=\"hint\">\n    {{ hint }}\n  </div>\n  <div class=\"fwe-select-invalid\" *ngIf=\"error\">\n    {{ error }}\n  </div>\n</div>\n<div class=\"fwe-d-none\" (cdkObserveContent)=\"onContentChange($event)\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.fng-select-panel-open .fng-select-panel{opacity:1!important}fng-select{width:auto}fng-select.ng-invalid:not(.ng-pristine) .fwe-select:hover{border-color:var(--fwe-red)}fng-select.ng-invalid:not(.ng-pristine) .fwe-select.fwe-required~.fwe-select-invalid{display:block}fng-select.ng-invalid:not(.ng-pristine) .fwe-select.fwe-required~.fwe-select-description{display:none}.fng-select-panel{opacity:0!important}.fng-select-panel.fng-select-panel-options-3 .fwe-select-options-container{max-height:162px}.fng-select-panel.fng-select-panel-options-4 .fwe-select-options-container{max-height:210px}.fng-select-panel.fng-select-panel-options-5 .fwe-select-options-container{max-height:258px}.fng-select-panel.fng-select-panel-options-6 .fwe-select-options-container{max-height:306px}.fng-select-panel.fng-select-panel-options-7 .fwe-select-options-container{max-height:354px}.fng-select-panel.fng-select-panel-options-8 .fwe-select-options-container{max-height:402px}.fng-select-panel.fng-select-panel-options-9 .fwe-select-options-container{max-height:450px}.fng-select-panel.fng-select-panel-options-10 .fwe-select-options-container{max-height:498px}.fng-select-panel .fwe-select-options-container{scrollbar-width:thin;scrollbar-color:var(--fwe-control-scrollbar) var(--fwe-gray-100)}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar{width:12px}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar-track{background:transparent}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar-thumb{overflow:visible;background-color:var(--fwe-control-scrollbar);border:3px solid rgba(242,243,245,0);-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:6px}.fng-select-panel-wrap{flex-basis:100%}.fwe-select-options-container{position:relative;top:4px;left:0px;max-height:258px;min-width:calc(100% + 0px)!important;max-width:280px;overflow:auto;font-size:16px;background-color:var(--fwe-white);border-radius:4px;padding:8px;margin:0;border:1px solid var(--fwe-gray-200);box-shadow:0 1px 4px #00000029;list-style:none;outline:0}.fwe-select-options-container .fwe-select-option{position:relative;line-height:24px;padding:12px 8px;min-height:24px;cursor:pointer}.fwe-select-options-container .fwe-select-option:hover{background-color:var(--fwe-gray-100)}.fwe-select-options-container .fwe-select-option:last-child{border-bottom:none}.fwe-select-options-container .fwe-select-option .fwe-select-option-content{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:24px;min-height:24px}.fng-select-pseudo-checkbox{width:16px;height:16px;border-radius:2px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;color:var(--fwe-control-border);border:1px solid;transition:none;margin-right:12px;top:-1px}.fng-select-pseudo-checkbox:after{color:var(--fwe-white);position:absolute;display:block;opacity:0;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.fng-select-pseudo-checkbox.fng-select-pseudo-checkbox-checked{background:var(--fwe-caerul);border:1px solid var(--fwe-caerul)}.fng-select-pseudo-checkbox.fng-select-pseudo-checkbox-checked:after{top:3px;left:2px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box}.chip-text-truncate{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-removable:after{position:absolute;right:5px;top:4px;color:var(--fwe-text);font-family:festo_icons-16;font-size:16px;content:\"\\ea1c\";line-height:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fwe-select-wrapper{display:flex;width:inherit;min-width:48px}.fwe-select-wrapper:before{bottom:unset;top:24px}.fwe-select-wrapper.fng-hide-label{margin-top:18px}.fwe-select-wrapper.fng-hide-label:before{top:6px}.fwe-select-wrapper.fwe-disabled:before{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select{cursor:pointer;height:unset;min-height:33px}.fwe-select-wrapper .fwe-select .fwe-select-content{padding-right:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5rem}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled)~.fwe-select-label:after{position:relative;left:3px;display:inline-block;content:\"*\"}.fwe-select-wrapper .fwe-select.fwe-disabled{cursor:default;border-color:var(--fwe-control-disabled)!important}.fwe-select-wrapper .fwe-select.fwe-disabled~.fwe-select-label{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip{color:var(--fwe-text-disabled);border:1px solid var(--fwe-control-disabled);pointer-events:none}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip .chip-removable:after{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select-label:empty~.fwe-select-options-container,.fwe-select-wrapper .fwe-select-label.fwe-sr-only~.fwe-select-options-container{top:38px}\n"], directives: [{ type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], pipes: { "fngChipText": ChipTextPipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-select',
-                    templateUrl: './select.component.html',
-                    styleUrls: ['./select.component.scss'],
-                    encapsulation: ViewEncapsulation.None,
-                    providers: [
+            args: [{ selector: 'fng-select', encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SelectComponent),
                             multi: true
                         }
-                    ]
-                }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { disabled: [{
+                    ], template: "<div #div class=\"fwe-select-wrapper\" [class.fwe-disabled]=\"disabled\" [class.fng-hide-label]=\"hideLabel\">\n  <div\n    class=\"fwe-select\"\n    (click)=\"toggle()\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n    [class.fwe-focus]=\"showOptions\"\n    [class.fwe-required]=\"required\"\n    [class.fwe-disabled]=\"disabled\"\n    [class.fwe-pty]=\"empty\"\n  >\n    <div class=\"fwe-select-content\">\n      <ng-container *ngIf=\"!multiple; else chips\">\n        {{ value != null && value | fngChipText: options:optionsValueKey:optionsTextKey }}\n      </ng-container>\n      <ng-template #chips>\n        <div class=\"fwe-chip-container\">\n          <div\n            *ngFor=\"let v of value\"\n            class=\"fwe-chip chip-text-truncate fwe-pr-4\"\n            [style.max-width.px]=\"triggerWidth\"\n            [title]=\"v | fngChipText: options:optionsValueKey:optionsTextKey\"\n          >\n            {{ v | fngChipText: options:optionsValueKey:optionsTextKey }}\n            <span class=\"chip-removable\" (click)=\"removeChip($event, v)\"></span>\n          </div>\n        </div>\n      </ng-template>\n    </div>\n  </div>\n  <ng-template\n    cdkConnectedOverlay\n    cdkConnectedOverlayHasBackdrop\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayMinWidth]=\"triggerWidth\"\n    [cdkConnectedOverlayOpen]=\"showOptions\"\n    [cdkConnectedOverlayPanelClass]=\"selectPanelClasses\"\n    (backdropClick)=\"close()\"\n  >\n    <div class=\"fng-select-panel-wrap\">\n      <ul class=\"fwe-select-options-container\">\n        <li class=\"fwe-select-option\" *ngIf=\"resetOption != null && !multiple\" (click)=\"select(null, $event)\">{{ resetOption }}</li>\n        <li\n          class=\"fwe-select-option\"\n          *ngFor=\"let option of options; let i = index\"\n          (click)=\"select(getOptionValue(i), $event)\"\n          [title]=\"getOptionText(i) || option?.text\"\n        >\n          <span class=\"fwe-select-option-content\">\n            <span\n              *ngIf=\"multiple\"\n              class=\"fng-select-pseudo-checkbox\"\n              [ngClass]=\"{ 'fng-select-pseudo-checkbox-checked': checked.get(getOptionValue(i)) === 'checked' }\"\n            ></span>\n            <span *ngIf=\"hasProjectedOptions; else defaultTemplate\" [innerHTML]=\"projectedHtml[i]\"></span>\n            <ng-template #defaultTemplate>{{ getOptionText(i) || option?.text }}</ng-template>\n          </span>\n        </li>\n      </ul>\n    </div>\n  </ng-template>\n  <label class=\"fwe-select-label\" [for]=\"id\" [class.fwe-sr-only]=\"hideLabel\">{{ label }}</label>\n  <div class=\"fwe-select-description\" *ngIf=\"hint\">\n    {{ hint }}\n  </div>\n  <div class=\"fwe-select-invalid\" *ngIf=\"error\">\n    {{ error }}\n  </div>\n</div>\n<div class=\"fwe-d-none\" (cdkObserveContent)=\"onContentChange($event)\">\n  <ng-content></ng-content>\n</div>\n", styles: ["@charset \"UTF-8\";.fng-select-panel-open .fng-select-panel{opacity:1!important}fng-select{width:auto}fng-select.ng-invalid:not(.ng-pristine) .fwe-select:hover{border-color:var(--fwe-red)}fng-select.ng-invalid:not(.ng-pristine) .fwe-select.fwe-required~.fwe-select-invalid{display:block}fng-select.ng-invalid:not(.ng-pristine) .fwe-select.fwe-required~.fwe-select-description{display:none}.fng-select-panel{opacity:0!important}.fng-select-panel.fng-select-panel-options-3 .fwe-select-options-container{max-height:162px}.fng-select-panel.fng-select-panel-options-4 .fwe-select-options-container{max-height:210px}.fng-select-panel.fng-select-panel-options-5 .fwe-select-options-container{max-height:258px}.fng-select-panel.fng-select-panel-options-6 .fwe-select-options-container{max-height:306px}.fng-select-panel.fng-select-panel-options-7 .fwe-select-options-container{max-height:354px}.fng-select-panel.fng-select-panel-options-8 .fwe-select-options-container{max-height:402px}.fng-select-panel.fng-select-panel-options-9 .fwe-select-options-container{max-height:450px}.fng-select-panel.fng-select-panel-options-10 .fwe-select-options-container{max-height:498px}.fng-select-panel .fwe-select-options-container{scrollbar-width:thin;scrollbar-color:var(--fwe-control-scrollbar) var(--fwe-gray-100)}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar{width:12px}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar-track{background:transparent}.fng-select-panel .fwe-select-options-container::-webkit-scrollbar-thumb{overflow:visible;background-color:var(--fwe-control-scrollbar);border:3px solid rgba(242,243,245,0);-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:6px}.fng-select-panel-wrap{flex-basis:100%}.fwe-select-options-container{position:relative;top:4px;left:0px;max-height:258px;min-width:calc(100% + 0px)!important;max-width:280px;overflow:auto;font-size:16px;background-color:var(--fwe-white);border-radius:4px;padding:8px;margin:0;border:1px solid var(--fwe-gray-200);box-shadow:0 1px 4px #00000029;list-style:none;outline:0}.fwe-select-options-container .fwe-select-option{position:relative;line-height:24px;padding:12px 8px;min-height:24px;cursor:pointer}.fwe-select-options-container .fwe-select-option:hover{background-color:var(--fwe-gray-100)}.fwe-select-options-container .fwe-select-option:last-child{border-bottom:none}.fwe-select-options-container .fwe-select-option .fwe-select-option-content{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:24px;min-height:24px}.fng-select-pseudo-checkbox{width:16px;height:16px;border-radius:2px;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;color:var(--fwe-control-border);border:1px solid;transition:none;margin-right:12px;top:-1px}.fng-select-pseudo-checkbox:after{color:var(--fwe-white);position:absolute;display:block;opacity:0;content:\"\";border-bottom:2px solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.fng-select-pseudo-checkbox.fng-select-pseudo-checkbox-checked{background:var(--fwe-caerul);border:1px solid var(--fwe-caerul)}.fng-select-pseudo-checkbox.fng-select-pseudo-checkbox-checked:after{top:3px;left:2px;width:8px;height:3px;border-left:2px solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box}.chip-text-truncate{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chip-removable:after{position:absolute;right:5px;top:4px;color:var(--fwe-text);font-family:festo_icons-16;font-size:16px;content:\"\\ea1c\";line-height:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fwe-select-wrapper{display:flex;width:inherit;min-width:48px}.fwe-select-wrapper:before{bottom:unset;top:24px}.fwe-select-wrapper.fng-hide-label{margin-top:18px}.fwe-select-wrapper.fng-hide-label:before{top:6px}.fwe-select-wrapper.fwe-disabled:before{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select{cursor:pointer;height:unset;min-height:33px}.fwe-select-wrapper .fwe-select .fwe-select-content{padding-right:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5rem}.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled)~.fwe-select-label:after{position:relative;left:3px;display:inline-block;content:\"*\"}.fwe-select-wrapper .fwe-select.fwe-disabled{cursor:default;border-color:var(--fwe-control-disabled)!important}.fwe-select-wrapper .fwe-select.fwe-disabled~.fwe-select-label{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip{color:var(--fwe-text-disabled);border:1px solid var(--fwe-control-disabled);pointer-events:none}.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip .chip-removable:after{color:var(--fwe-text-disabled)}.fwe-select-wrapper .fwe-select-label:empty~.fwe-select-options-container,.fwe-select-wrapper .fwe-select-label.fwe-sr-only~.fwe-select-options-container{top:38px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: undefined, decorators: [{
+                        type: Inject,
+                        args: [DOCUMENT]
+                    }] }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }];
+    }, propDecorators: { disabled: [{
                 type: Input
             }], required: [{
                 type: Input
@@ -2778,29 +2681,23 @@ class TextInputComponent {
         this.disabled = isDisabled;
     }
 }
-TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: TextInputComponent, selector: "fng-text-input", inputs: { label: "label", type: "type", readonly: "readonly", step: "step", min: "min", max: "max", tabindex: "tabindex", placeholder: "placeholder", name: "name", disabled: "disabled", value: "value", required: "required", error: "error", hint: "hint" }, providers: [
+TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TextInputComponent, selector: "fng-text-input", inputs: { label: "label", type: "type", readonly: "readonly", step: "step", min: "min", max: "max", tabindex: "tabindex", placeholder: "placeholder", name: "name", disabled: "disabled", value: "value", required: "required", error: "error", hint: "hint" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => TextInputComponent),
             multi: true
         }
     ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<label class=\"fwe-input-text\" [class.fwe-no-pointer-events]=\"readonly === true\">\n  <input\n    #inputElement\n    [disabled]=\"disabled\"\n    [required]=\"required === true || null\"\n    [attr.readonly]=\"readonly === true || null\"\n    [attr.placeholder]=\"placeholder || null\"\n    [attr.type]=\"type\"\n    [attr.step]=\"step\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.name]=\"name || null\"\n    [attr.tabindex]=\"tabindex\"\n    [class.fng-has-value]=\"value != null && value !== ''\"\n    autocomplete=\"off\"\n    [value]=\"value\"\n    (focus)=\"onFocus()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <span class=\"fwe-input-text-label\">{{ label }}</span>\n  <span *ngIf=\"hint; else projectedHint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error; else projectedError\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n\n  <ng-template #projectedHint>\n    <span class=\"fwe-input-text-info fng-projected\"><ng-content select=\".fng-hint\"></ng-content></span>\n  </ng-template>\n\n  <ng-template #projectedError>\n    <span class=\"fwe-input-text-invalid fng-projected\"><ng-content select=\".fng-error\"></ng-content></span>\n  </ng-template>\n</label>\n", styles: ["fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}fng-text-input.ng-valid label.fwe-input-text input[type=text]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=password]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=date]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=time]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=datetime-local]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=number]:hover:not(:disabled){border-bottom:1px solid var(--fwe-hero)!important}fng-text-input label.fwe-input-text.fwe-no-pointer-events{pointer-events:none!important}.fwe-input-text-invalid.fng-projected:empty{display:none}.fwe-input-text-info.fng-projected:empty{display:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TextInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-text-input',
-                    templateUrl: './text-input.component.html',
-                    styleUrls: ['./text-input.component.scss'],
-                    providers: [
+            args: [{ selector: 'fng-text-input', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TextInputComponent),
                             multi: true
                         }
-                    ],
-                    encapsulation: ViewEncapsulation.None
-                }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<label class=\"fwe-input-text\" [class.fwe-no-pointer-events]=\"readonly === true\">\n  <input\n    #inputElement\n    [disabled]=\"disabled\"\n    [required]=\"required === true || null\"\n    [attr.readonly]=\"readonly === true || null\"\n    [attr.placeholder]=\"placeholder || null\"\n    [attr.type]=\"type\"\n    [attr.step]=\"step\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.name]=\"name || null\"\n    [attr.tabindex]=\"tabindex\"\n    [class.fng-has-value]=\"value != null && value !== ''\"\n    autocomplete=\"off\"\n    [value]=\"value\"\n    (focus)=\"onFocus()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n  />\n  <span class=\"fwe-input-text-label\">{{ label }}</span>\n  <span *ngIf=\"hint; else projectedHint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error; else projectedError\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n\n  <ng-template #projectedHint>\n    <span class=\"fwe-input-text-info fng-projected\"><ng-content select=\".fng-hint\"></ng-content></span>\n  </ng-template>\n\n  <ng-template #projectedError>\n    <span class=\"fwe-input-text-invalid fng-projected\"><ng-content select=\".fng-error\"></ng-content></span>\n  </ng-template>\n</label>\n", styles: ["fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}fng-text-input.ng-valid label.fwe-input-text input[type=text]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=password]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=date]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=time]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=datetime-local]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=number]:hover:not(:disabled){border-bottom:1px solid var(--fwe-hero)!important}fng-text-input label.fwe-input-text.fwe-no-pointer-events{pointer-events:none!important}.fwe-input-text-invalid.fng-projected:empty{display:none}.fwe-input-text-info.fng-projected:empty{display:none}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], type: [{
@@ -2963,29 +2860,23 @@ class TextAreaComponent {
         this.disabled = isDisabled;
     }
 }
-TextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: TextAreaComponent, selector: "fng-text-area", inputs: { label: "label", readonly: "readonly", placeholder: "placeholder", tabindex: "tabindex", name: "name", disabled: "disabled", value: "value", required: "required", error: "error", hint: "hint", rows: "rows", maxlength: "maxlength" }, providers: [
+TextAreaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TextAreaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TextAreaComponent, selector: "fng-text-area", inputs: { label: "label", readonly: "readonly", placeholder: "placeholder", tabindex: "tabindex", name: "name", disabled: "disabled", value: "value", required: "required", error: "error", hint: "hint", rows: "rows", maxlength: "maxlength" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => TextAreaComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<label class=\"fwe-input-text\">\n  <textarea #inputElement\n         [class]=\"'fwe-row-' + rows\"\n         [disabled]=\"disabled\"\n         [required]=\"required === true || null\"\n         [attr.readonly]=\"readonly === true || null\"\n         [attr.placeholder]=\"placeholder || null\"\n         [attr.name]=\"name || null\"\n         [attr.tabindex]=\"tabindex\"\n         [class.fng-has-value]=\"value != null && value !== ''\"\n         autocomplete=\"off\"\n         (focus)=\"onFocus()\"\n         (input)=\"onInput($event)\"\n         (blur)=\"onBlur()\">{{value}}</textarea>\n  <span class=\"fwe-input-text-label\">{{label}}</span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{hint}}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{error}}</span>\n  <span *ngIf=\"maxlength > 0 && value != null\" class=\"fwe-input-text-count\">{{value.length}} / {{maxlength}}</span>\n</label>\n\n\n", styles: ["fng-text-area.ng-invalid label.fwe-input-text textarea{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-area.ng-invalid label.fwe-input-text textarea:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-area.ng-invalid label.fwe-input-text textarea:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-label,fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-invalid,fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-area.ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-area.ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}label.fwe-input-text .fwe-input-text-count{display:block;line-height:1.5;position:absolute;right:0px;bottom:0px;color:var(--fwe-text-disabled);font-size:12px}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TextAreaComponent, decorators: [{
+    ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true }], ngImport: i0, template: "<label class=\"fwe-input-text\">\n  <textarea\n    #inputElement\n    [class]=\"'fwe-row-' + rows\"\n    [disabled]=\"disabled\"\n    [required]=\"required === true || null\"\n    [attr.readonly]=\"readonly === true || null\"\n    [attr.placeholder]=\"placeholder || null\"\n    [attr.name]=\"name || null\"\n    [attr.tabindex]=\"tabindex\"\n    [class.fng-has-value]=\"value != null && value !== ''\"\n    autocomplete=\"off\"\n    (focus)=\"onFocus()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    >{{ value }}</textarea\n  >\n  <span class=\"fwe-input-text-label\">{{ label }}</span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n  <span *ngIf=\"maxlength > 0 && value != null\" class=\"fwe-input-text-count\">{{ value.length }} / {{ maxlength }}</span>\n</label>\n", styles: ["fng-text-area.ng-invalid label.fwe-input-text textarea{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-area.ng-invalid label.fwe-input-text textarea:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-area.ng-invalid label.fwe-input-text textarea:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-label,fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-invalid,fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-area.ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-area.ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}label.fwe-input-text .fwe-input-text-count{display:block;line-height:1.5;position:absolute;right:0px;bottom:0px;color:var(--fwe-text-disabled);font-size:12px}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TextAreaComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-text-area',
-                    templateUrl: './text-area.component.html',
-                    styleUrls: ['./text-area.component.scss'],
-                    providers: [
+            args: [{ selector: 'fng-text-area', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TextAreaComponent),
                             multi: true
                         }
-                    ],
-                    encapsulation: ViewEncapsulation.None
-                }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<label class=\"fwe-input-text\">\n  <textarea\n    #inputElement\n    [class]=\"'fwe-row-' + rows\"\n    [disabled]=\"disabled\"\n    [required]=\"required === true || null\"\n    [attr.readonly]=\"readonly === true || null\"\n    [attr.placeholder]=\"placeholder || null\"\n    [attr.name]=\"name || null\"\n    [attr.tabindex]=\"tabindex\"\n    [class.fng-has-value]=\"value != null && value !== ''\"\n    autocomplete=\"off\"\n    (focus)=\"onFocus()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    >{{ value }}</textarea\n  >\n  <span class=\"fwe-input-text-label\">{{ label }}</span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n  <span *ngIf=\"maxlength > 0 && value != null\" class=\"fwe-input-text-count\">{{ value.length }} / {{ maxlength }}</span>\n</label>\n", styles: ["fng-text-area.ng-invalid label.fwe-input-text textarea{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-area.ng-invalid label.fwe-input-text textarea:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-area.ng-invalid label.fwe-input-text textarea:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-label,fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-invalid,fng-text-area.ng-invalid label.fwe-input-text textarea:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-area.ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-area.ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}label.fwe-input-text .fwe-input-text-count{display:block;line-height:1.5;position:absolute;right:0px;bottom:0px;color:var(--fwe-text-disabled);font-size:12px}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], readonly: [{
@@ -3369,29 +3260,23 @@ class ColorPickerComponent {
         this.isSelectOpen = false;
     }
 }
-ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: ColorPickerComponent, selector: "fng-color-picker", inputs: { useAlpha: "useAlpha", alpha: "alpha", color: "color", disabled: "disabled", palette: "palette", paletteOnly: "paletteOnly" }, outputs: { alphaChange: "alphaChange" }, providers: [
+ColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ColorPickerComponent, selector: "fng-color-picker", inputs: { useAlpha: "useAlpha", alpha: "alpha", color: "color", disabled: "disabled", palette: "palette", paletteOnly: "paletteOnly" }, outputs: { alphaChange: "alphaChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => ColorPickerComponent),
             multi: true
         }
-    ], usesOnChanges: true, ngImport: i0, template: "<div class=\"fwe-color-picker\" [class.fwe-alpha-active]=\"useAlpha\">\n  <div class=\"fwe-d-flex\" *ngIf=\"!paletteOnly\">\n    <div class=\"fwe-gradient-picker\">\n      <div class=\"fwe-saturation-gradient\" [ngStyle]=\"{ 'background-image': getSaturationGradient() }\"></div>\n      <div class=\"fwe-brightness-gradient\" (click)=\"onGradientClick($event)\"></div>\n      <div\n        class=\"fwe-knob\"\n        cdkDragBoundary=\".gradient-picker\"\n        cdkDrag\n        [cdkDragFreeDragPosition]=\"{ x: saturationKnobOffset, y: valueKnobOffset }\"\n        (cdkDragMoved)=\"onGradientDrag($event)\"\n        [style.background]=\"color\"\n      ></div>\n    </div>\n\n    <div class=\"fwe-hue-picker\">\n      <div class=\"fwe-picker-background\" (click)=\"onHueClick($event)\"></div>\n      <div\n        class=\"fwe-knob\"\n        cdkDragBoundary=\".hue-picker\"\n        cdkDragLockAxis=\"y\"\n        cdkDrag\n        [cdkDragFreeDragPosition]=\"{ x: 3, y: hueKnobOffset }\"\n        (cdkDragMoved)=\"onHueDrag($event)\"\n        [style.background]=\"'hsl(' + hue * 360 + ', 100%, 50%)'\"\n      ></div>\n    </div>\n\n    <div class=\"fwe-alpha-picker\" *ngIf=\"useAlpha\">\n      <svg\n        class=\"fwe-no-color-pattern\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        id=\"canvas1\"\n        width=\"8\"\n        height=\"184\"\n      >\n        <defs>\n          <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n            <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n            <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n          </pattern>\n        </defs>\n        <rect x=\"0\" y=\"0\" rx=\"4\" ry=\"4\" width=\"8\" height=\"184\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n      </svg>\n      <div\n        class=\"fwe-picker-background\"\n        (click)=\"onAlphaClick($event)\"\n        [ngStyle]=\"{ 'background-image': 'linear-gradient( ' + color + ' , transparent)' }\"\n      ></div>\n\n      <div\n        class=\"fwe-knob\"\n        cdkDragBoundary=\".alpha-picker\"\n        cdkDragLockAxis=\"y\"\n        cdkDrag\n        [cdkDragFreeDragPosition]=\"{ x: 3, y: alphaKnobOffset }\"\n        (cdkDragMoved)=\"onAlphaDrag($event)\"\n        [style.background]=\"color\"\n      ></div>\n    </div>\n  </div>\n\n  <div class=\"fwe-mt-s\" *ngIf=\"!paletteOnly\">\n    <div class=\"fwe-type-select\">\n      <div class=\"fwe-type-indicator\" (click)=\"isSelectOpen = !isSelectOpen\">\n        <span class=\"fwe-input-type\">{{ inputType }}</span>\n        <i class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </div>\n      <div class=\"fwe-popover\" *ngIf=\"isSelectOpen\">\n        <div class=\"fwe-type-item\" (click)=\"onChangeType('HEX')\" [class.fwe-selected]=\"inputType === 'HEX'\">\n          <i class=\"fwe-icon fwe-icon-menu-check\"></i> HEX\n        </div>\n        <div class=\"fwe-type-item\" (click)=\"onChangeType('RGB')\" [class.fwe-selected]=\"inputType === 'RGB'\">\n          <i class=\"fwe-icon fwe-icon-menu-check\"></i> RGB\n        </div>\n      </div>\n    </div>\n\n    <div class=\"fwe-d-flex\">\n      <ng-container *ngIf=\"inputType === 'HEX'\">\n        <label class=\"fwe-input-text fwe-hex-input\">\n          <input type=\"text\" [(ngModel)]=\"hexInputColor\" (blur)=\"onHexBlur()\" (input)=\"onHexInput()\" />\n        </label>\n      </ng-container>\n      <ng-container *ngIf=\"inputType === 'RGB'\">\n        <label class=\"fwe-input-text fwe-red-input\">\n          <input type=\"number\" [(ngModel)]=\"redInput\" (input)=\"onRgbInput(redInput, 'r')\" />\n        </label>\n        <label class=\"fwe-input-text fwe-green-input\">\n          <input type=\"number\" [(ngModel)]=\"greenInput\" (input)=\"onRgbInput(greenInput, 'g')\" />\n        </label>\n        <label class=\"fwe-input-text fwe-blue-input\">\n          <input type=\"number\" min=\"0\" max=\"255\" [(ngModel)]=\"blueInput\" (input)=\"onRgbInput(blueInput, 'b')\" />\n        </label>\n      </ng-container>\n\n      <label class=\"fwe-input-text fwe-alpha-input fwe-ml-auto\" *ngIf=\"useAlpha\">\n        <span>\n          <input type=\"number\" min=\"0\" max=\"100\" [(ngModel)]=\"alphaInput\" (input)=\"onAlphaInput(alphaInput)\" />\n          <span class=\"fwe-percent-char\">%</span>\n        </span>\n      </label>\n    </div>\n  </div>\n\n  <div class=\"fwe-mt-xs fwe-color-grid\" *ngIf=\"palette && palette.length\">\n    <div class=\"fwe-remove-color-button\" (click)=\"onRemoveColor()\">\n      <svg\n        class=\"fwe-no-color-pattern\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        id=\"canvas1\"\n        width=\"18\"\n        height=\"18\"\n      >\n        <defs>\n          <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n            <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n            <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n          </pattern>\n        </defs>\n        <rect x=\"0\" y=\"0\" rx=\"0\" ry=\"0\" width=\"18\" height=\"18\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n      </svg>\n      <i class=\"fwe-icon fwe-icon-menu-check\" [class.fwe-color-text]=\"!color\"></i>\n    </div>\n    <ng-container *ngFor=\"let colorItem of palette\">\n      <div\n        class=\"fwe-color-item\"\n        [class.fwe-white-item]=\"colorItem.toUpperCase() === '#FFFFFF'\"\n        [style.background]=\"colorItem\"\n        (click)=\"color = colorItem\"\n      >\n        <i class=\"fwe-icon fwe-icon-menu-check\" *ngIf=\"colorItem.toUpperCase() === color\"></i>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: ["fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}fng-text-input.ng-valid label.fwe-input-text input[type=text]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=password]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=date]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=time]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=datetime-local]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=number]:hover:not(:disabled){border-bottom:1px solid var(--fwe-hero)!important}fng-text-input label.fwe-input-text.fwe-no-pointer-events{pointer-events:none!important}.fwe-input-text-invalid.fng-projected:empty{display:none}.fwe-input-text-info.fng-projected:empty{display:none}\n", ".fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-top{width:17px;height:17px;position:absolute;overflow:hidden}.fwe-triangle.fwe-triangle-right:after,.fwe-triangle.fwe-triangle-left:after,.fwe-triangle.fwe-triangle-bottom:after,.fwe-triangle.fwe-triangle-top:after{content:\"\";position:absolute;width:12px;height:12px;background:var(--fwe-white);transform:rotate(45deg);box-shadow:0 1px 4px #3333}.fwe-popover.fwe-popover-menu,.fwe-popover{background-color:var(--fwe-white);box-shadow:0 1px 4px #3333;border-radius:4px}.fwe-popover{padding:8px;font-size:14px;line-height:1rem}.fwe-popover-container{position:relative;display:inline-block}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translate(-8px)}.fwe-triangle.fwe-triangle-top:after{top:11px;left:3px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translate(-8px)}.fwe-triangle.fwe-triangle-bottom:after{top:-6px;left:3px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left:after{top:2px;left:11px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right:after{top:2px;left:-6px}.fwe-popover.fwe-popover-menu{font-size:16px;line-height:1.5rem;padding:16px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button{width:100%;margin-left:inherit;padding:0 8px 0 0;text-align:left;height:32px;max-height:32px;display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=\" fwe-icon-\"]{margin-left:inherit}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{color:var(--fwe-black);background-color:#3333331a}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:#3333}.fwe-popover .fwe-popover-legend{display:table;margin:16px;line-height:24px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content{display:table-row}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dd{display:table-cell;margin:0}.fwe-color-picker{width:216px}.fwe-color-picker.fwe-alpha-active{width:245px}.fwe-color-picker .fwe-gradient-picker{position:relative;width:198px;height:198px;margin:-7px}.fwe-color-picker .fwe-gradient-picker .fwe-brightness-gradient{position:absolute;top:7px;bottom:7px;right:7px;left:7px;background-image:linear-gradient(transparent,black)}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{position:absolute;top:7px;bottom:7px;right:7px;left:7px}.fwe-color-picker .fwe-vertical-picker,.fwe-color-picker .fwe-alpha-picker,.fwe-color-picker .fwe-hue-picker{position:relative;height:198px;width:14px;margin:-7px -3px -7px 18px}.fwe-color-picker .fwe-vertical-picker .fwe-picker-background,.fwe-color-picker .fwe-alpha-picker .fwe-picker-background,.fwe-color-picker .fwe-hue-picker .fwe-picker-background{margin:7px 3px;height:184px;width:8px;border-radius:4px}.fwe-color-picker .fwe-vertical-picker .fwe-knob,.fwe-color-picker .fwe-alpha-picker .fwe-knob,.fwe-color-picker .fwe-hue-picker .fwe-knob{left:-3px}.fwe-color-picker .fwe-hue-picker .fwe-picker-background{background-image:linear-gradient(#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)}.fwe-color-picker .fwe-alpha-picker .fwe-no-color-pattern{margin:7px 3px;position:absolute}.fwe-color-picker .fwe-alpha-picker .fwe-picker-background{position:absolute}.fwe-color-picker .fwe-type-select{position:relative;display:flex}.fwe-color-picker .fwe-type-select .fwe-type-indicator{flex-shrink:1;cursor:pointer;display:flex}.fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type{font-size:12px;line-height:17px;font-weight:bold}.fwe-color-picker .fwe-type-select .fwe-type-indicator:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-icon-arrows-collapse{margin-left:16px;line-height:16px}.fwe-color-picker .fwe-type-select .fwe-popover{position:absolute;z-index:1;top:24px;left:0px}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item{cursor:pointer;display:flex;padding:8px}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item .fwe-icon-menu-check{opacity:0;margin-right:8px}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected{cursor:default}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected .fwe-icon-menu-check{opacity:1}.fwe-color-picker input::-webkit-outer-spin-button,.fwe-color-picker input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.fwe-color-picker input[type=number]{-moz-appearance:textfield}.fwe-color-picker input{padding-right:0!important;text-align:center}.fwe-color-picker .fwe-hex-input{width:75px;margin-right:16px}.fwe-color-picker .fwe-red-input{width:32px;margin-right:8px}.fwe-color-picker .fwe-green-input{width:32px;margin-right:8px}.fwe-color-picker .fwe-blue-input{width:32px}.fwe-color-picker .fwe-alpha-input span input{width:48px;padding-right:16px!important}.fwe-color-picker .fwe-alpha-input .fwe-percent-char{margin-left:-16px}.fwe-color-picker .fwe-color-grid{display:flex;flex-wrap:wrap;margin-right:-8px;margin-bottom:-8px}.fwe-color-picker .fwe-color-grid .fwe-color-item{align-items:center;display:flex;justify-content:center;color:#fff;height:24px;width:24px;border-radius:4px;margin-right:8px;margin-bottom:8px}.fwe-color-picker .fwe-color-grid .fwe-color-item.fwe-white-item{border:1px solid var(--fwe-control-border);color:#000}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button{align-items:center;display:flex;justify-content:center;height:24px;width:24px;border-radius:4px;border:1px solid var(--fwe-control-border);color:var(--fwe-control);margin-right:8px;margin-bottom:8px}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button .fwe-no-color-pattern{margin:2px}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button i{color:transparent;position:absolute}.fwe-color-picker .fwe-knob{position:absolute;z-index:1;height:14px;width:14px;border-radius:50%;border:2px solid white;box-shadow:0 0 4px #00000026}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragDisabled", "cdkDragStartDelay", "cdkDragLockAxis", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragBoundary", "cdkDragRootElement", "cdkDragPreviewContainer", "cdkDragData", "cdkDragFreeDragPosition"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ColorPickerComponent, decorators: [{
+    ], usesOnChanges: true, ngImport: i0, template: "<div class=\"fwe-color-picker\" [class.fwe-alpha-active]=\"useAlpha\">\n  <div class=\"fwe-d-flex\" *ngIf=\"!paletteOnly\">\n    <div class=\"fwe-gradient-picker\">\n      <div class=\"fwe-saturation-gradient\" [ngStyle]=\"{ 'background-image': getSaturationGradient() }\"></div>\n      <div class=\"fwe-brightness-gradient\" (click)=\"onGradientClick($event)\"></div>\n      <div\n        class=\"fwe-knob\"\n        cdkDragBoundary=\".gradient-picker\"\n        cdkDrag\n        [cdkDragFreeDragPosition]=\"{ x: saturationKnobOffset, y: valueKnobOffset }\"\n        (cdkDragMoved)=\"onGradientDrag($event)\"\n        [style.background]=\"color\"\n      ></div>\n    </div>\n\n    <div class=\"fwe-hue-picker\">\n      <div class=\"fwe-picker-background\" (click)=\"onHueClick($event)\"></div>\n      <div\n        class=\"fwe-knob\"\n        cdkDragBoundary=\".hue-picker\"\n        cdkDragLockAxis=\"y\"\n        cdkDrag\n        [cdkDragFreeDragPosition]=\"{ x: 3, y: hueKnobOffset }\"\n        (cdkDragMoved)=\"onHueDrag($event)\"\n        [style.background]=\"'hsl(' + hue * 360 + ', 100%, 50%)'\"\n      ></div>\n    </div>\n\n    <div class=\"fwe-alpha-picker\" *ngIf=\"useAlpha\">\n      <svg\n        class=\"fwe-no-color-pattern\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        id=\"canvas1\"\n        width=\"8\"\n        height=\"184\"\n      >\n        <defs>\n          <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n            <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n            <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n          </pattern>\n        </defs>\n        <rect x=\"0\" y=\"0\" rx=\"4\" ry=\"4\" width=\"8\" height=\"184\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n      </svg>\n      <div\n        class=\"fwe-picker-background\"\n        (click)=\"onAlphaClick($event)\"\n        [ngStyle]=\"{ 'background-image': 'linear-gradient( ' + color + ' , transparent)' }\"\n      ></div>\n\n      <div\n        class=\"fwe-knob\"\n        cdkDragBoundary=\".alpha-picker\"\n        cdkDragLockAxis=\"y\"\n        cdkDrag\n        [cdkDragFreeDragPosition]=\"{ x: 3, y: alphaKnobOffset }\"\n        (cdkDragMoved)=\"onAlphaDrag($event)\"\n        [style.background]=\"color\"\n      ></div>\n    </div>\n  </div>\n\n  <div class=\"fwe-mt-s\" *ngIf=\"!paletteOnly\">\n    <div class=\"fwe-type-select\">\n      <div class=\"fwe-type-indicator\" (click)=\"isSelectOpen = !isSelectOpen\">\n        <span class=\"fwe-input-type\">{{ inputType }}</span>\n        <i class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </div>\n      <div class=\"fwe-popover\" *ngIf=\"isSelectOpen\">\n        <div class=\"fwe-type-item\" (click)=\"onChangeType('HEX')\" [class.fwe-selected]=\"inputType === 'HEX'\">\n          <i class=\"fwe-icon fwe-icon-menu-check\"></i> HEX\n        </div>\n        <div class=\"fwe-type-item\" (click)=\"onChangeType('RGB')\" [class.fwe-selected]=\"inputType === 'RGB'\">\n          <i class=\"fwe-icon fwe-icon-menu-check\"></i> RGB\n        </div>\n      </div>\n    </div>\n\n    <div class=\"fwe-d-flex\">\n      <ng-container *ngIf=\"inputType === 'HEX'\">\n        <label class=\"fwe-input-text fwe-hex-input\">\n          <input type=\"text\" [(ngModel)]=\"hexInputColor\" (blur)=\"onHexBlur()\" (input)=\"onHexInput()\" />\n        </label>\n      </ng-container>\n      <ng-container *ngIf=\"inputType === 'RGB'\">\n        <label class=\"fwe-input-text fwe-red-input\">\n          <input type=\"number\" [(ngModel)]=\"redInput\" (input)=\"onRgbInput(redInput, 'r')\" />\n        </label>\n        <label class=\"fwe-input-text fwe-green-input\">\n          <input type=\"number\" [(ngModel)]=\"greenInput\" (input)=\"onRgbInput(greenInput, 'g')\" />\n        </label>\n        <label class=\"fwe-input-text fwe-blue-input\">\n          <input type=\"number\" min=\"0\" max=\"255\" [(ngModel)]=\"blueInput\" (input)=\"onRgbInput(blueInput, 'b')\" />\n        </label>\n      </ng-container>\n\n      <label class=\"fwe-input-text fwe-alpha-input fwe-ml-auto\" *ngIf=\"useAlpha\">\n        <span>\n          <input type=\"number\" min=\"0\" max=\"100\" [(ngModel)]=\"alphaInput\" (input)=\"onAlphaInput(alphaInput)\" />\n          <span class=\"fwe-percent-char\">%</span>\n        </span>\n      </label>\n    </div>\n  </div>\n\n  <div class=\"fwe-mt-xs fwe-color-grid\" *ngIf=\"palette && palette.length\">\n    <div class=\"fwe-remove-color-button\" (click)=\"onRemoveColor()\">\n      <svg\n        class=\"fwe-no-color-pattern\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        id=\"canvas1\"\n        width=\"18\"\n        height=\"18\"\n      >\n        <defs>\n          <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n            <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n            <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n          </pattern>\n        </defs>\n        <rect x=\"0\" y=\"0\" rx=\"0\" ry=\"0\" width=\"18\" height=\"18\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n      </svg>\n      <i class=\"fwe-icon fwe-icon-menu-check\" [class.fwe-color-text]=\"!color\"></i>\n    </div>\n    <ng-container *ngFor=\"let colorItem of palette\">\n      <div\n        class=\"fwe-color-item\"\n        [class.fwe-white-item]=\"colorItem.toUpperCase() === '#FFFFFF'\"\n        [style.background]=\"colorItem\"\n        (click)=\"color = colorItem\"\n      >\n        <i class=\"fwe-icon fwe-icon-menu-check\" *ngIf=\"colorItem.toUpperCase() === color\"></i>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: ["fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}fng-text-input.ng-valid label.fwe-input-text input[type=text]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=password]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=date]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=time]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=datetime-local]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=number]:hover:not(:disabled){border-bottom:1px solid var(--fwe-hero)!important}fng-text-input label.fwe-input-text.fwe-no-pointer-events{pointer-events:none!important}.fwe-input-text-invalid.fng-projected:empty{display:none}.fwe-input-text-info.fng-projected:empty{display:none}\n", ".fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-top{width:17px;height:17px;position:absolute;overflow:hidden}.fwe-triangle.fwe-triangle-right:after,.fwe-triangle.fwe-triangle-left:after,.fwe-triangle.fwe-triangle-bottom:after,.fwe-triangle.fwe-triangle-top:after{content:\"\";position:absolute;width:12px;height:12px;background:var(--fwe-white);transform:rotate(45deg);box-shadow:0 1px 4px #3333}.fwe-popover.fwe-popover-menu,.fwe-popover{background-color:var(--fwe-white);box-shadow:0 1px 4px #3333;border-radius:4px}.fwe-popover{padding:8px;font-size:14px;line-height:1rem}.fwe-popover-container{position:relative;display:inline-block}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translate(-8px)}.fwe-triangle.fwe-triangle-top:after{top:11px;left:3px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translate(-8px)}.fwe-triangle.fwe-triangle-bottom:after{top:-6px;left:3px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left:after{top:2px;left:11px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right:after{top:2px;left:-6px}.fwe-popover.fwe-popover-menu{font-size:16px;line-height:1.5rem;padding:16px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button{width:100%;margin-left:inherit;padding:0 8px 0 0;text-align:left;height:32px;max-height:32px;display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=\" fwe-icon-\"]{margin-left:inherit}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{color:var(--fwe-black);background-color:#3333331a}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:#3333}.fwe-popover .fwe-popover-legend{display:table;margin:16px;line-height:24px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content{display:table-row}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dd{display:table-cell;margin:0}.fwe-color-picker{width:216px}.fwe-color-picker.fwe-alpha-active{width:245px}.fwe-color-picker .fwe-gradient-picker{position:relative;width:198px;height:198px;margin:-7px}.fwe-color-picker .fwe-gradient-picker .fwe-brightness-gradient{position:absolute;top:7px;bottom:7px;right:7px;left:7px;background-image:linear-gradient(transparent,black)}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{position:absolute;top:7px;bottom:7px;right:7px;left:7px}.fwe-color-picker .fwe-vertical-picker,.fwe-color-picker .fwe-alpha-picker,.fwe-color-picker .fwe-hue-picker{position:relative;height:198px;width:14px;margin:-7px -3px -7px 18px}.fwe-color-picker .fwe-vertical-picker .fwe-picker-background,.fwe-color-picker .fwe-alpha-picker .fwe-picker-background,.fwe-color-picker .fwe-hue-picker .fwe-picker-background{margin:7px 3px;height:184px;width:8px;border-radius:4px}.fwe-color-picker .fwe-vertical-picker .fwe-knob,.fwe-color-picker .fwe-alpha-picker .fwe-knob,.fwe-color-picker .fwe-hue-picker .fwe-knob{left:-3px}.fwe-color-picker .fwe-hue-picker .fwe-picker-background{background-image:linear-gradient(#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)}.fwe-color-picker .fwe-alpha-picker .fwe-no-color-pattern{margin:7px 3px;position:absolute}.fwe-color-picker .fwe-alpha-picker .fwe-picker-background{position:absolute}.fwe-color-picker .fwe-type-select{position:relative;display:flex}.fwe-color-picker .fwe-type-select .fwe-type-indicator{flex-shrink:1;cursor:pointer;display:flex}.fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type{font-size:12px;line-height:17px;font-weight:700}.fwe-color-picker .fwe-type-select .fwe-type-indicator:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-icon-arrows-collapse{margin-left:16px;line-height:16px}.fwe-color-picker .fwe-type-select .fwe-popover{position:absolute;z-index:1;top:24px;left:0px}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item{cursor:pointer;display:flex;padding:8px}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item .fwe-icon-menu-check{opacity:0;margin-right:8px}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected{cursor:default}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected .fwe-icon-menu-check{opacity:1}.fwe-color-picker input::-webkit-outer-spin-button,.fwe-color-picker input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.fwe-color-picker input[type=number]{-moz-appearance:textfield}.fwe-color-picker input{padding-right:0!important;text-align:center}.fwe-color-picker .fwe-hex-input{width:75px;margin-right:16px}.fwe-color-picker .fwe-red-input,.fwe-color-picker .fwe-green-input{width:32px;margin-right:8px}.fwe-color-picker .fwe-blue-input{width:32px}.fwe-color-picker .fwe-alpha-input span input{width:48px;padding-right:16px!important}.fwe-color-picker .fwe-alpha-input .fwe-percent-char{margin-left:-16px}.fwe-color-picker .fwe-color-grid{display:flex;flex-wrap:wrap;margin-right:-8px;margin-bottom:-8px}.fwe-color-picker .fwe-color-grid .fwe-color-item{align-items:center;display:flex;justify-content:center;color:#fff;height:24px;width:24px;border-radius:4px;margin-right:8px;margin-bottom:8px}.fwe-color-picker .fwe-color-grid .fwe-color-item.fwe-white-item{border:1px solid var(--fwe-control-border);color:#000}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button{align-items:center;display:flex;justify-content:center;height:24px;width:24px;border-radius:4px;border:1px solid var(--fwe-control-border);color:var(--fwe-control);margin-right:8px;margin-bottom:8px}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button .fwe-no-color-pattern{margin:2px}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button i{color:transparent;position:absolute}.fwe-color-picker .fwe-knob{position:absolute;z-index:1;height:14px;width:14px;border-radius:50%;border:2px solid white;box-shadow:0 0 4px #00000026}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ColorPickerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-color-picker',
-                    templateUrl: './color-picker.component.html',
-                    styleUrls: ['../text-input/text-input.component.scss', './color-picker.component.scss'],
-                    providers: [
+            args: [{ selector: 'fng-color-picker', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => ColorPickerComponent),
                             multi: true
                         }
-                    ],
-                    encapsulation: ViewEncapsulation.None
-                }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"fwe-color-picker\" [class.fwe-alpha-active]=\"useAlpha\">\n  <div class=\"fwe-d-flex\" *ngIf=\"!paletteOnly\">\n    <div class=\"fwe-gradient-picker\">\n      <div class=\"fwe-saturation-gradient\" [ngStyle]=\"{ 'background-image': getSaturationGradient() }\"></div>\n      <div class=\"fwe-brightness-gradient\" (click)=\"onGradientClick($event)\"></div>\n      <div\n        class=\"fwe-knob\"\n        cdkDragBoundary=\".gradient-picker\"\n        cdkDrag\n        [cdkDragFreeDragPosition]=\"{ x: saturationKnobOffset, y: valueKnobOffset }\"\n        (cdkDragMoved)=\"onGradientDrag($event)\"\n        [style.background]=\"color\"\n      ></div>\n    </div>\n\n    <div class=\"fwe-hue-picker\">\n      <div class=\"fwe-picker-background\" (click)=\"onHueClick($event)\"></div>\n      <div\n        class=\"fwe-knob\"\n        cdkDragBoundary=\".hue-picker\"\n        cdkDragLockAxis=\"y\"\n        cdkDrag\n        [cdkDragFreeDragPosition]=\"{ x: 3, y: hueKnobOffset }\"\n        (cdkDragMoved)=\"onHueDrag($event)\"\n        [style.background]=\"'hsl(' + hue * 360 + ', 100%, 50%)'\"\n      ></div>\n    </div>\n\n    <div class=\"fwe-alpha-picker\" *ngIf=\"useAlpha\">\n      <svg\n        class=\"fwe-no-color-pattern\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        id=\"canvas1\"\n        width=\"8\"\n        height=\"184\"\n      >\n        <defs>\n          <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n            <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n            <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n          </pattern>\n        </defs>\n        <rect x=\"0\" y=\"0\" rx=\"4\" ry=\"4\" width=\"8\" height=\"184\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n      </svg>\n      <div\n        class=\"fwe-picker-background\"\n        (click)=\"onAlphaClick($event)\"\n        [ngStyle]=\"{ 'background-image': 'linear-gradient( ' + color + ' , transparent)' }\"\n      ></div>\n\n      <div\n        class=\"fwe-knob\"\n        cdkDragBoundary=\".alpha-picker\"\n        cdkDragLockAxis=\"y\"\n        cdkDrag\n        [cdkDragFreeDragPosition]=\"{ x: 3, y: alphaKnobOffset }\"\n        (cdkDragMoved)=\"onAlphaDrag($event)\"\n        [style.background]=\"color\"\n      ></div>\n    </div>\n  </div>\n\n  <div class=\"fwe-mt-s\" *ngIf=\"!paletteOnly\">\n    <div class=\"fwe-type-select\">\n      <div class=\"fwe-type-indicator\" (click)=\"isSelectOpen = !isSelectOpen\">\n        <span class=\"fwe-input-type\">{{ inputType }}</span>\n        <i class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </div>\n      <div class=\"fwe-popover\" *ngIf=\"isSelectOpen\">\n        <div class=\"fwe-type-item\" (click)=\"onChangeType('HEX')\" [class.fwe-selected]=\"inputType === 'HEX'\">\n          <i class=\"fwe-icon fwe-icon-menu-check\"></i> HEX\n        </div>\n        <div class=\"fwe-type-item\" (click)=\"onChangeType('RGB')\" [class.fwe-selected]=\"inputType === 'RGB'\">\n          <i class=\"fwe-icon fwe-icon-menu-check\"></i> RGB\n        </div>\n      </div>\n    </div>\n\n    <div class=\"fwe-d-flex\">\n      <ng-container *ngIf=\"inputType === 'HEX'\">\n        <label class=\"fwe-input-text fwe-hex-input\">\n          <input type=\"text\" [(ngModel)]=\"hexInputColor\" (blur)=\"onHexBlur()\" (input)=\"onHexInput()\" />\n        </label>\n      </ng-container>\n      <ng-container *ngIf=\"inputType === 'RGB'\">\n        <label class=\"fwe-input-text fwe-red-input\">\n          <input type=\"number\" [(ngModel)]=\"redInput\" (input)=\"onRgbInput(redInput, 'r')\" />\n        </label>\n        <label class=\"fwe-input-text fwe-green-input\">\n          <input type=\"number\" [(ngModel)]=\"greenInput\" (input)=\"onRgbInput(greenInput, 'g')\" />\n        </label>\n        <label class=\"fwe-input-text fwe-blue-input\">\n          <input type=\"number\" min=\"0\" max=\"255\" [(ngModel)]=\"blueInput\" (input)=\"onRgbInput(blueInput, 'b')\" />\n        </label>\n      </ng-container>\n\n      <label class=\"fwe-input-text fwe-alpha-input fwe-ml-auto\" *ngIf=\"useAlpha\">\n        <span>\n          <input type=\"number\" min=\"0\" max=\"100\" [(ngModel)]=\"alphaInput\" (input)=\"onAlphaInput(alphaInput)\" />\n          <span class=\"fwe-percent-char\">%</span>\n        </span>\n      </label>\n    </div>\n  </div>\n\n  <div class=\"fwe-mt-xs fwe-color-grid\" *ngIf=\"palette && palette.length\">\n    <div class=\"fwe-remove-color-button\" (click)=\"onRemoveColor()\">\n      <svg\n        class=\"fwe-no-color-pattern\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        id=\"canvas1\"\n        width=\"18\"\n        height=\"18\"\n      >\n        <defs>\n          <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n            <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n            <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n          </pattern>\n        </defs>\n        <rect x=\"0\" y=\"0\" rx=\"0\" ry=\"0\" width=\"18\" height=\"18\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n      </svg>\n      <i class=\"fwe-icon fwe-icon-menu-check\" [class.fwe-color-text]=\"!color\"></i>\n    </div>\n    <ng-container *ngFor=\"let colorItem of palette\">\n      <div\n        class=\"fwe-color-item\"\n        [class.fwe-white-item]=\"colorItem.toUpperCase() === '#FFFFFF'\"\n        [style.background]=\"colorItem\"\n        (click)=\"color = colorItem\"\n      >\n        <i class=\"fwe-icon fwe-icon-menu-check\" *ngIf=\"colorItem.toUpperCase() === color\"></i>\n      </div>\n    </ng-container>\n  </div>\n</div>\n", styles: ["fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local],fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]{border-bottom:1px solid var(--fwe-red)!important;box-shadow:none;outline:none}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:focus,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:focus{border-bottom:1px solid var(--fwe-red)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=text]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=password]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=date]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=datetime-local]:disabled~.fwe-input-text-info,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-label,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-invalid,fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text input[type=number]:disabled~.fwe-input-text-info{color:var(--fwe-text-disabled)}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-info{display:none!important}fng-text-input:not(.ng-pristine).ng-invalid label.fwe-input-text .fwe-input-text-invalid{display:block!important}fng-text-input.ng-valid label.fwe-input-text input[type=text]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=password]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=date]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=time]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=datetime-local]:hover:not(:disabled),fng-text-input.ng-valid label.fwe-input-text input[type=number]:hover:not(:disabled){border-bottom:1px solid var(--fwe-hero)!important}fng-text-input label.fwe-input-text.fwe-no-pointer-events{pointer-events:none!important}.fwe-input-text-invalid.fng-projected:empty{display:none}.fwe-input-text-info.fng-projected:empty{display:none}\n", ".fwe-triangle.fwe-triangle-right,.fwe-triangle.fwe-triangle-left,.fwe-triangle.fwe-triangle-bottom,.fwe-triangle.fwe-triangle-top{width:17px;height:17px;position:absolute;overflow:hidden}.fwe-triangle.fwe-triangle-right:after,.fwe-triangle.fwe-triangle-left:after,.fwe-triangle.fwe-triangle-bottom:after,.fwe-triangle.fwe-triangle-top:after{content:\"\";position:absolute;width:12px;height:12px;background:var(--fwe-white);transform:rotate(45deg);box-shadow:0 1px 4px #3333}.fwe-popover.fwe-popover-menu,.fwe-popover{background-color:var(--fwe-white);box-shadow:0 1px 4px #3333;border-radius:4px}.fwe-popover{padding:8px;font-size:14px;line-height:1rem}.fwe-popover-container{position:relative;display:inline-block}.fwe-triangle.fwe-triangle-top{left:50%;top:-17px;transform:translate(-8px)}.fwe-triangle.fwe-triangle-top:after{top:11px;left:3px}.fwe-triangle.fwe-triangle-bottom{left:50%;top:100%;transform:translate(-8px)}.fwe-triangle.fwe-triangle-bottom:after{top:-6px;left:3px}.fwe-triangle.fwe-triangle-left{left:-17px;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-left:after{top:2px;left:11px}.fwe-triangle.fwe-triangle-right{left:100%;top:50%;transform:translateY(-8px)}.fwe-triangle.fwe-triangle-right:after{top:2px;left:-6px}.fwe-popover.fwe-popover-menu{font-size:16px;line-height:1.5rem;padding:16px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item{border-bottom:none;min-height:36px;padding:0}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button{width:100%;margin-left:inherit;padding:0 8px 0 0;text-align:left;height:32px;max-height:32px;display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button:hover{color:var(--fwe-black)}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap;height:24px;width:32px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button i:before{display:inline-flex}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button span{display:inline-flex;height:24px}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item button [class*=\" fwe-icon-\"]{margin-left:inherit}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:hover{color:var(--fwe-black);background-color:#3333331a}.fwe-popover.fwe-popover-menu .fwe-list-group .fwe-list-group-item:active{background-color:#3333}.fwe-popover .fwe-popover-legend{display:table;margin:16px;line-height:24px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content{display:table-row}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dt{display:table-cell;margin:0;padding-right:8px}.fwe-popover .fwe-popover-legend .fwe-popover-legend-content dd{display:table-cell;margin:0}.fwe-color-picker{width:216px}.fwe-color-picker.fwe-alpha-active{width:245px}.fwe-color-picker .fwe-gradient-picker{position:relative;width:198px;height:198px;margin:-7px}.fwe-color-picker .fwe-gradient-picker .fwe-brightness-gradient{position:absolute;top:7px;bottom:7px;right:7px;left:7px;background-image:linear-gradient(transparent,black)}.fwe-color-picker .fwe-gradient-picker .fwe-saturation-gradient{position:absolute;top:7px;bottom:7px;right:7px;left:7px}.fwe-color-picker .fwe-vertical-picker,.fwe-color-picker .fwe-alpha-picker,.fwe-color-picker .fwe-hue-picker{position:relative;height:198px;width:14px;margin:-7px -3px -7px 18px}.fwe-color-picker .fwe-vertical-picker .fwe-picker-background,.fwe-color-picker .fwe-alpha-picker .fwe-picker-background,.fwe-color-picker .fwe-hue-picker .fwe-picker-background{margin:7px 3px;height:184px;width:8px;border-radius:4px}.fwe-color-picker .fwe-vertical-picker .fwe-knob,.fwe-color-picker .fwe-alpha-picker .fwe-knob,.fwe-color-picker .fwe-hue-picker .fwe-knob{left:-3px}.fwe-color-picker .fwe-hue-picker .fwe-picker-background{background-image:linear-gradient(#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000)}.fwe-color-picker .fwe-alpha-picker .fwe-no-color-pattern{margin:7px 3px;position:absolute}.fwe-color-picker .fwe-alpha-picker .fwe-picker-background{position:absolute}.fwe-color-picker .fwe-type-select{position:relative;display:flex}.fwe-color-picker .fwe-type-select .fwe-type-indicator{flex-shrink:1;cursor:pointer;display:flex}.fwe-color-picker .fwe-type-select .fwe-type-indicator .fwe-input-type{font-size:12px;line-height:17px;font-weight:700}.fwe-color-picker .fwe-type-select .fwe-type-indicator:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-icon-arrows-collapse{margin-left:16px;line-height:16px}.fwe-color-picker .fwe-type-select .fwe-popover{position:absolute;z-index:1;top:24px;left:0px}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item{cursor:pointer;display:flex;padding:8px}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item:hover{color:var(--fwe-hero)}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item .fwe-icon-menu-check{opacity:0;margin-right:8px}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected{cursor:default}.fwe-color-picker .fwe-type-select .fwe-popover .fwe-type-item.fwe-selected .fwe-icon-menu-check{opacity:1}.fwe-color-picker input::-webkit-outer-spin-button,.fwe-color-picker input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.fwe-color-picker input[type=number]{-moz-appearance:textfield}.fwe-color-picker input{padding-right:0!important;text-align:center}.fwe-color-picker .fwe-hex-input{width:75px;margin-right:16px}.fwe-color-picker .fwe-red-input,.fwe-color-picker .fwe-green-input{width:32px;margin-right:8px}.fwe-color-picker .fwe-blue-input{width:32px}.fwe-color-picker .fwe-alpha-input span input{width:48px;padding-right:16px!important}.fwe-color-picker .fwe-alpha-input .fwe-percent-char{margin-left:-16px}.fwe-color-picker .fwe-color-grid{display:flex;flex-wrap:wrap;margin-right:-8px;margin-bottom:-8px}.fwe-color-picker .fwe-color-grid .fwe-color-item{align-items:center;display:flex;justify-content:center;color:#fff;height:24px;width:24px;border-radius:4px;margin-right:8px;margin-bottom:8px}.fwe-color-picker .fwe-color-grid .fwe-color-item.fwe-white-item{border:1px solid var(--fwe-control-border);color:#000}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button{align-items:center;display:flex;justify-content:center;height:24px;width:24px;border-radius:4px;border:1px solid var(--fwe-control-border);color:var(--fwe-control);margin-right:8px;margin-bottom:8px}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button .fwe-no-color-pattern{margin:2px}.fwe-color-picker .fwe-color-grid .fwe-remove-color-button i{color:transparent;position:absolute}.fwe-color-picker .fwe-knob{position:absolute;z-index:1;height:14px;width:14px;border-radius:50%;border:2px solid white;box-shadow:0 0 4px #00000026}\n"] }]
         }], propDecorators: { useAlpha: [{
                 type: Input
             }], alpha: [{
@@ -3437,7 +3322,7 @@ class SliderComponent {
         this.updateValuePosition();
     }
     onResize() {
-        this.resizeSubject.next();
+        this.resizeSubject.next(true);
     }
     ngAfterViewInit() {
         this.resizeSub = this.resizeSubject.pipe(debounceTime(25)).subscribe(() => this.updateValuePosition());
@@ -3471,29 +3356,23 @@ class SliderComponent {
         }
     }
 }
-SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SliderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: SliderComponent, selector: "fng-slider", inputs: { label: "label", large: "large", min: "min", max: "max", step: "step", digitsInfo: "digitsInfo", locale: "locale", disabled: "disabled", value: "value" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
+SliderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SliderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SliderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: SliderComponent, selector: "fng-slider", inputs: { label: "label", large: "large", min: "min", max: "max", step: "step", digitsInfo: "digitsInfo", locale: "locale", disabled: "disabled", value: "value" }, host: { listeners: { "window:resize": "onResize()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => SliderComponent),
             multi: true
         }
-    ], ngImport: i0, template: "<label class=\"fwe-slider\" [class.fwe-slider-lg]=\"large\" [class.fng-slider-label]=\"label != null\">\n  <span *ngIf=\"label\">{{label}}</span>\n  <input type=\"range\"\n         class=\"fwe-slider-input\"\n         [disabled]=\"disabled\"\n         [attr.min]=\"min\"\n         [attr.max]=\"max\"\n         [attr.step]=\"step\"\n         autocomplete=\"off\"\n         [value]=\"value\"\n         (input)=\"onInput($event)\">\n  <span *ngIf=\"left != null\" class=\"fng-slider-value\" [style.left]=\"left + 'px'\">{{value | number:digitsInfo:locale}}</span>\n</label>\n", styles: ["label.fwe-slider{display:block;height:56px;position:relative}label.fwe-slider.fng-slider-label{height:83px}label.fwe-slider .fng-slider-value{color:var(--fwe-text);font-size:16px;margin-bottom:0;position:absolute;bottom:0px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i1.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SliderComponent, decorators: [{
+    ], ngImport: i0, template: "<label class=\"fwe-slider\" [class.fwe-slider-lg]=\"large\" [class.fng-slider-label]=\"label != null\">\n  <span *ngIf=\"label\">{{ label }}</span>\n  <input\n    type=\"range\"\n    class=\"fwe-slider-input\"\n    [disabled]=\"disabled\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.step]=\"step\"\n    autocomplete=\"off\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n  />\n  <span *ngIf=\"left != null\" class=\"fng-slider-value\" [style.left]=\"left + 'px'\">{{ value | number: digitsInfo:locale }}</span>\n</label>\n", styles: ["label.fwe-slider{display:block;height:56px;position:relative}label.fwe-slider.fng-slider-label{height:83px}label.fwe-slider .fng-slider-value{color:var(--fwe-text);font-size:16px;margin-bottom:0;position:absolute;bottom:0px;-webkit-user-select:none;user-select:none}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "number": i1.DecimalPipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SliderComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-slider',
-                    templateUrl: './slider.component.html',
-                    styleUrls: ['./slider.component.scss'],
-                    providers: [
+            args: [{ selector: 'fng-slider', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SliderComponent),
                             multi: true
                         }
-                    ],
-                    encapsulation: ViewEncapsulation.None
-                }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<label class=\"fwe-slider\" [class.fwe-slider-lg]=\"large\" [class.fng-slider-label]=\"label != null\">\n  <span *ngIf=\"label\">{{ label }}</span>\n  <input\n    type=\"range\"\n    class=\"fwe-slider-input\"\n    [disabled]=\"disabled\"\n    [attr.min]=\"min\"\n    [attr.max]=\"max\"\n    [attr.step]=\"step\"\n    autocomplete=\"off\"\n    [value]=\"value\"\n    (input)=\"onInput($event)\"\n  />\n  <span *ngIf=\"left != null\" class=\"fng-slider-value\" [style.left]=\"left + 'px'\">{{ value | number: digitsInfo:locale }}</span>\n</label>\n", styles: ["label.fwe-slider{display:block;height:56px;position:relative}label.fwe-slider.fng-slider-label{height:83px}label.fwe-slider .fng-slider-value{color:var(--fwe-text);font-size:16px;margin-bottom:0;position:absolute;bottom:0px;-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { label: [{
                 type: Input
             }], large: [{
@@ -3563,15 +3442,11 @@ class ColorIndicatorComponent {
         }
     }
 }
-ColorIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ColorIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColorIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: ColorIndicatorComponent, selector: "fng-color-indicator", inputs: { label: "label", text: "text", color: "color", showPopOver: "showPopOver", disabled: "disabled" }, ngImport: i0, template: "<div class=\"fwe-color-indicator\" (click)=\"isEditorOpen = showPopOver ? !isEditorOpen : false\" [class.disabled]=\"disabled\">\n  <div class=\"fwe-color-label\" [style.opacity]=\"isEditorOpen ? 0 : 1\">\n    {{ label }}\n  </div>\n  <div class=\"fwe-color-container\">\n    <div\n      class=\"fwe-color-box\"\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      [style.background]=\"color\"\n      [style.border-color]=\"getBorderColor()\"\n    >\n      <svg\n        *ngIf=\"!color\"\n        class=\"fwe-no-color-pattern\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        id=\"canvas1\"\n        width=\"18\"\n        height=\"18\"\n      >\n        <defs>\n          <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n            <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n            <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n          </pattern>\n        </defs>\n        <rect x=\"0\" y=\"0\" rx=\"0\" ry=\"0\" width=\"18\" height=\"18\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n      </svg>\n    </div>\n    <div class=\"fwe-color-indicator-text\" *ngIf=\"text\">\n      {{ text }}\n    </div>\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isEditorOpen\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n    [cdkConnectedOverlayViewportMargin]=\"32\"\n    (backdropClick)=\"isEditorOpen = false\"\n  >\n    <div class=\"fwe-popover-container\">\n      <div class=\"fwe-triangle\"></div>\n      <div class=\"fwe-popover\" #popoverContent>\n        <div class=\"fwe-color-label fwe-mb-s\">\n          {{ label }}\n        </div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".fwe-color-indicator .fwe-popover-container{position:relative}.fwe-color-indicator .fwe-popover-container .fwe-popover{background-color:var(--fwe-white);padding:8px 16px 16px;font-size:14px;line-height:1rem;box-shadow:0 1px 4px #3333;border-radius:8px}.fwe-color-indicator .fwe-backdrop{background:transparent}.fwe-color-indicator .fwe-color-label{height:18px;font-size:12px;font-weight:bold;margin-bottom:4px}.fwe-color-indicator .fwe-color-container{display:flex}.fwe-color-indicator .fwe-color-container .fwe-color-box{height:24px;width:24px;border-radius:4px;border:1px solid var(--fwe-control-border);background:var(--fwe-white)}.fwe-color-indicator .fwe-color-container .fwe-color-box .fwe-no-color-pattern{margin:2px}.fwe-color-indicator .fwe-color-container .fwe-color-indicator-text{margin-left:8px}.fwe-color-indicator.disabled{pointer-events:none}.fwe-color-indicator.disabled .fwe-color-label{color:var(--fwe-text-disabled)}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-box{opacity:.5}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-indicator-text{color:var(--fwe-text-disabled)}\n"], directives: [{ type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayPositions", "cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayTransformOriginOn"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ColorIndicatorComponent, decorators: [{
+ColorIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ColorIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ColorIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ColorIndicatorComponent, selector: "fng-color-indicator", inputs: { label: "label", text: "text", color: "color", showPopOver: "showPopOver", disabled: "disabled" }, ngImport: i0, template: "<div class=\"fwe-color-indicator\" (click)=\"isEditorOpen = showPopOver ? !isEditorOpen : false\" [class.disabled]=\"disabled\">\n  <div class=\"fwe-color-label\" [style.opacity]=\"isEditorOpen ? 0 : 1\">\n    {{ label }}\n  </div>\n  <div class=\"fwe-color-container\">\n    <div\n      class=\"fwe-color-box\"\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      [style.background]=\"color\"\n      [style.border-color]=\"getBorderColor()\"\n    >\n      <svg\n        *ngIf=\"!color\"\n        class=\"fwe-no-color-pattern\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        id=\"canvas1\"\n        width=\"18\"\n        height=\"18\"\n      >\n        <defs>\n          <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n            <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n            <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n          </pattern>\n        </defs>\n        <rect x=\"0\" y=\"0\" rx=\"0\" ry=\"0\" width=\"18\" height=\"18\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n      </svg>\n    </div>\n    <div class=\"fwe-color-indicator-text\" *ngIf=\"text\">\n      {{ text }}\n    </div>\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isEditorOpen\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n    [cdkConnectedOverlayViewportMargin]=\"32\"\n    (backdropClick)=\"isEditorOpen = false\"\n  >\n    <div class=\"fwe-popover-container\">\n      <div class=\"fwe-triangle\"></div>\n      <div class=\"fwe-popover\" #popoverContent>\n        <div class=\"fwe-color-label fwe-mb-s\">\n          {{ label }}\n        </div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".fwe-color-indicator .fwe-popover-container{position:relative}.fwe-color-indicator .fwe-popover-container .fwe-popover{background-color:var(--fwe-white);padding:8px 16px 16px;font-size:14px;line-height:1rem;box-shadow:0 1px 4px #3333;border-radius:8px}.fwe-color-indicator .fwe-backdrop{background:transparent}.fwe-color-indicator .fwe-color-label{height:18px;font-size:12px;font-weight:700;margin-bottom:4px}.fwe-color-indicator .fwe-color-container{display:flex}.fwe-color-indicator .fwe-color-container .fwe-color-box{height:24px;width:24px;border-radius:4px;border:1px solid var(--fwe-control-border);background:var(--fwe-white)}.fwe-color-indicator .fwe-color-container .fwe-color-box .fwe-no-color-pattern{margin:2px}.fwe-color-indicator .fwe-color-container .fwe-color-indicator-text{margin-left:8px}.fwe-color-indicator.disabled{pointer-events:none}.fwe-color-indicator.disabled .fwe-color-label{color:var(--fwe-text-disabled)}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-box{opacity:.5}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-indicator-text{color:var(--fwe-text-disabled)}\n"], directives: [{ type: i1$1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ColorIndicatorComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-color-indicator',
-                    templateUrl: './color-indicator.component.html',
-                    styleUrls: ['./color-indicator.component.scss']
-                }]
+            args: [{ selector: 'fng-color-indicator', template: "<div class=\"fwe-color-indicator\" (click)=\"isEditorOpen = showPopOver ? !isEditorOpen : false\" [class.disabled]=\"disabled\">\n  <div class=\"fwe-color-label\" [style.opacity]=\"isEditorOpen ? 0 : 1\">\n    {{ label }}\n  </div>\n  <div class=\"fwe-color-container\">\n    <div\n      class=\"fwe-color-box\"\n      cdkOverlayOrigin\n      #trigger=\"cdkOverlayOrigin\"\n      [style.background]=\"color\"\n      [style.border-color]=\"getBorderColor()\"\n    >\n      <svg\n        *ngIf=\"!color\"\n        class=\"fwe-no-color-pattern\"\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n        id=\"canvas1\"\n        width=\"18\"\n        height=\"18\"\n      >\n        <defs>\n          <pattern id=\"bwsquare2px\" width=\"4\" height=\"4\" patternUnits=\"userSpaceOnUse\">\n            <rect x=\"0\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n            <rect x=\"2\" y=\"0\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"0\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#e5e8eb\" />\n            <rect x=\"2\" y=\"2\" width=\"2\" height=\"2\" stroke=\"none\" fill=\"#ffffff\" />\n          </pattern>\n        </defs>\n        <rect x=\"0\" y=\"0\" rx=\"0\" ry=\"0\" width=\"18\" height=\"18\" fill=\"url(#bwsquare2px)\" stroke-width=\"0\" />\n      </svg>\n    </div>\n    <div class=\"fwe-color-indicator-text\" *ngIf=\"text\">\n      {{ text }}\n    </div>\n  </div>\n\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isEditorOpen\"\n    [cdkConnectedOverlayPositions]=\"positions\"\n    [cdkConnectedOverlayHasBackdrop]=\"true\"\n    [cdkConnectedOverlayBackdropClass]=\"'backdrop'\"\n    [cdkConnectedOverlayViewportMargin]=\"32\"\n    (backdropClick)=\"isEditorOpen = false\"\n  >\n    <div class=\"fwe-popover-container\">\n      <div class=\"fwe-triangle\"></div>\n      <div class=\"fwe-popover\" #popoverContent>\n        <div class=\"fwe-color-label fwe-mb-s\">\n          {{ label }}\n        </div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </ng-template>\n</div>\n", styles: [".fwe-color-indicator .fwe-popover-container{position:relative}.fwe-color-indicator .fwe-popover-container .fwe-popover{background-color:var(--fwe-white);padding:8px 16px 16px;font-size:14px;line-height:1rem;box-shadow:0 1px 4px #3333;border-radius:8px}.fwe-color-indicator .fwe-backdrop{background:transparent}.fwe-color-indicator .fwe-color-label{height:18px;font-size:12px;font-weight:700;margin-bottom:4px}.fwe-color-indicator .fwe-color-container{display:flex}.fwe-color-indicator .fwe-color-container .fwe-color-box{height:24px;width:24px;border-radius:4px;border:1px solid var(--fwe-control-border);background:var(--fwe-white)}.fwe-color-indicator .fwe-color-container .fwe-color-box .fwe-no-color-pattern{margin:2px}.fwe-color-indicator .fwe-color-container .fwe-color-indicator-text{margin-left:8px}.fwe-color-indicator.disabled{pointer-events:none}.fwe-color-indicator.disabled .fwe-color-label{color:var(--fwe-text-disabled)}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-box{opacity:.5}.fwe-color-indicator.disabled .fwe-color-container .fwe-color-indicator-text{color:var(--fwe-text-disabled)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], text: [{
@@ -3615,9 +3490,9 @@ class ValueAccessorBaseDirective {
         this.disabled = isDisabled;
     }
 }
-ValueAccessorBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ValueAccessorBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-ValueAccessorBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.0", type: ValueAccessorBaseDirective, inputs: { disabled: "disabled" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ValueAccessorBaseDirective, decorators: [{
+ValueAccessorBaseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValueAccessorBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+ValueAccessorBaseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: ValueAccessorBaseDirective, inputs: { disabled: "disabled" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ValueAccessorBaseDirective, decorators: [{
             type: Directive
         }], propDecorators: { disabled: [{
                 type: Input
@@ -3646,17 +3521,11 @@ class SegmentControlComponent {
         this.change.emit(event.target.value);
     }
 }
-SegmentControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SegmentControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: SegmentControlComponent, selector: "fng-segment-control", inputs: { name: "name", value: "value", label: "label", icon: "icon", iconOnly: "iconOnly", checked: "checked", disabled: "disabled" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #tpl>\n  <input\n    (change)=\"onChange($event)\"\n    class=\"fwe-segment-input\"\n    type=\"radio\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n  />\n  <label class=\"fwe-segment-label\" [for]=\"id\">\n    <ng-container [ngSwitch]=\"viewMode\">\n      <ng-container *ngSwitchCase=\"'icon'\">\n        <span class=\"fwe-sr-only\">{{ label }}</span>\n        <i aria-hidden=\"true\" class=\"fwe-icon\" [ngClass]=\"icon\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'text'\">\n        {{ label }}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'icon-text'\">\n        <i aria-hidden=\"true\" class=\"fwe-icon\" [ngClass]=\"icon\"></i>{{ label }}\n      </ng-container>\n    </ng-container>\n  </label>\n</ng-template>\n", styles: [""], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SegmentControlComponent, decorators: [{
+SegmentControlComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SegmentControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SegmentControlComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: SegmentControlComponent, selector: "fng-segment-control", inputs: { name: "name", value: "value", label: "label", icon: "icon", iconOnly: "iconOnly", checked: "checked", disabled: "disabled" }, outputs: { change: "change" }, viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-template #tpl>\n  <input\n    (change)=\"onChange($event)\"\n    class=\"fwe-segment-input\"\n    type=\"radio\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n  />\n  <label class=\"fwe-segment-label\" [for]=\"id\">\n    <ng-container [ngSwitch]=\"viewMode\">\n      <ng-container *ngSwitchCase=\"'icon'\">\n        <span class=\"fwe-sr-only\">{{ label }}</span>\n        <i aria-hidden=\"true\" class=\"fwe-icon\" [ngClass]=\"icon\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'text'\">\n        {{ label }}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'icon-text'\"> <i aria-hidden=\"true\" class=\"fwe-icon\" [ngClass]=\"icon\"></i>{{ label }} </ng-container>\n    </ng-container>\n  </label>\n</ng-template>\n", styles: [""], directives: [{ type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SegmentControlComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-segment-control',
-                    templateUrl: './segment-control.component.html',
-                    styleUrls: ['./segment-control.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-segment-control', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-template #tpl>\n  <input\n    (change)=\"onChange($event)\"\n    class=\"fwe-segment-input\"\n    type=\"radio\"\n    [id]=\"id\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [checked]=\"checked\"\n    [disabled]=\"disabled\"\n  />\n  <label class=\"fwe-segment-label\" [for]=\"id\">\n    <ng-container [ngSwitch]=\"viewMode\">\n      <ng-container *ngSwitchCase=\"'icon'\">\n        <span class=\"fwe-sr-only\">{{ label }}</span>\n        <i aria-hidden=\"true\" class=\"fwe-icon\" [ngClass]=\"icon\"></i>\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'text'\">\n        {{ label }}\n      </ng-container>\n      <ng-container *ngSwitchCase=\"'icon-text'\"> <i aria-hidden=\"true\" class=\"fwe-icon\" [ngClass]=\"icon\"></i>{{ label }} </ng-container>\n    </ng-container>\n  </label>\n</ng-template>\n", styles: [""] }]
         }], propDecorators: { name: [{
                 type: Input
             }], value: [{
@@ -3744,30 +3613,23 @@ class SegmentComponent extends ValueAccessorBaseDirective {
         });
     }
 }
-SegmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SegmentComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SegmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: SegmentComponent, selector: "fng-segment", inputs: { legend: "legend", config: "config", value: "value" }, outputs: { fngChange: "fngChange", change: "change" }, providers: [
+SegmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SegmentComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SegmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: SegmentComponent, selector: "fng-segment", inputs: { legend: "legend", config: "config", value: "value" }, outputs: { fngChange: "fngChange", change: "change" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => SegmentComponent),
             multi: true
         }
     ], queries: [{ propertyName: "controls", predicate: SegmentControlComponent, descendants: true }], viewQueries: [{ propertyName: "vc", first: true, predicate: ["vc"], descendants: true, read: ViewContainerRef }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<fieldset\n  class=\"fwe-segment\"\n  [ngClass]=\"{\n    'fwe-segment-outline': config.outline,\n    'fwe-segment-icon': useIcon,\n    'fwe-segment-icon-text': useIconAndText\n  }\"\n>\n  <legend>{{ legend }}</legend>\n  <div class=\"fwe-segment-group\">\n    <ng-container #vc></ng-container>\n  </div>\n</fieldset>\n", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SegmentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SegmentComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-segment',
-                    templateUrl: './segment.component.html',
-                    styleUrls: ['./segment.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None,
-                    providers: [
+            args: [{ selector: 'fng-segment', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => SegmentComponent),
                             multi: true
                         }
-                    ]
-                }]
+                    ], template: "<fieldset\n  class=\"fwe-segment\"\n  [ngClass]=\"{\n    'fwe-segment-outline': config.outline,\n    'fwe-segment-icon': useIcon,\n    'fwe-segment-icon-text': useIconAndText\n  }\"\n>\n  <legend>{{ legend }}</legend>\n  <div class=\"fwe-segment-group\">\n    <ng-container #vc></ng-container>\n  </div>\n</fieldset>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { legend: [{
                 type: Input
             }], config: [{
@@ -3826,15 +3688,11 @@ class FlatpickrComponent {
         }
     }
 }
-FlatpickrComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FlatpickrComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FlatpickrComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: FlatpickrComponent, selector: "fng-flatpickr", inputs: { date: "date", options: "options" }, outputs: { dateChange: "dateChange" }, viewQueries: [{ propertyName: "datePickerRef", first: true, predicate: ["datePicker"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"fng-flatpickr\">\n  <div #datePicker></div>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FlatpickrComponent, decorators: [{
+FlatpickrComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FlatpickrComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FlatpickrComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: FlatpickrComponent, selector: "fng-flatpickr", inputs: { date: "date", options: "options" }, outputs: { dateChange: "dateChange" }, viewQueries: [{ propertyName: "datePickerRef", first: true, predicate: ["datePicker"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"fng-flatpickr\">\n  <div #datePicker></div>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FlatpickrComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-flatpickr',
-                    templateUrl: './flatpickr.component.html',
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-flatpickr', encapsulation: ViewEncapsulation.None, template: "<div class=\"fng-flatpickr\">\n  <div #datePicker></div>\n</div>\n" }]
         }], propDecorators: { date: [{
                 type: Input
             }], options: [{
@@ -3973,38 +3831,34 @@ class DatePickerComponent {
             this.datePickerRef = null;
         }
         if (this.complete != null) {
-            this.complete.next();
+            this.complete.next(true);
             this.complete.complete();
         }
     }
 }
-DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1$1.Overlay }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
-DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: DatePickerComponent, selector: "fng-date-picker", inputs: { value: "value", disabled: "disabled", hint: "hint", error: "error", options: "options", locale: "locale", format: "format", timezone: "timezone", required: "required", width: "width" }, host: { listeners: { "document:keydown": "hide($event)" }, properties: { "style.width": "this.width", "style.display": "this.display" } }, providers: [
+DatePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DatePickerComponent, deps: [{ token: i1$1.Overlay }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
+DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: DatePickerComponent, selector: "fng-date-picker", inputs: { value: "value", disabled: "disabled", hint: "hint", error: "error", options: "options", locale: "locale", format: "format", timezone: "timezone", required: "required", width: "width" }, host: { listeners: { "document:keydown": "hide($event)" }, properties: { "style.width": "this.width", "style.display": "this.display" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DatePickerComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "connector", first: true, predicate: ["connector"], descendants: true, static: true }], ngImport: i0, template: "<label #connector class=\"fng-date-picker fwe-input-text fwe-input-text-icon\" (click)=\"toggle($event)\">\n  <i class=\"fwe-icon fwe-icon-time-calendar\" [class.fwe-color-hero]=\"datePickerRef != null\" [class.fwe-color-control-disabled]=\"disabled\"></i>\n  <input\n    aria-label=\"picked date\"\n    type=\"text\"\n    readonly\n    [required]=\"required === true || null\"\n    [class.fwe-border-hero]=\"datePickerRef != null\"\n    [value]=\"displayValue\"\n    [disabled]=\"disabled\"\n  />\n  <span class=\"fwe-input-text-label\"><ng-content></ng-content></span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n</label>\n", styles: [".fwe-border-hero{border-color:var(--fwe-hero)!important}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: DatePickerComponent, decorators: [{
+    ], viewQueries: [{ propertyName: "connector", first: true, predicate: ["connector"], descendants: true, static: true }], ngImport: i0, template: "<label #connector class=\"fng-date-picker fwe-input-text fwe-input-text-icon\" (click)=\"toggle($event)\">\n  <i\n    class=\"fwe-icon fwe-icon-time-calendar\"\n    [class.fwe-color-hero]=\"datePickerRef != null\"\n    [class.fwe-color-control-disabled]=\"disabled\"\n  ></i>\n  <input\n    aria-label=\"picked date\"\n    type=\"text\"\n    readonly\n    [required]=\"required === true || null\"\n    [class.fwe-border-hero]=\"datePickerRef != null\"\n    [value]=\"displayValue\"\n    [disabled]=\"disabled\"\n  />\n  <span class=\"fwe-input-text-label\"><ng-content></ng-content></span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n</label>\n", styles: [".fwe-border-hero{border-color:var(--fwe-hero)!important}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-date-picker',
-                    templateUrl: './date-picker.component.html',
-                    styleUrls: ['./date-picker.component.scss'],
-                    providers: [
+            args: [{ selector: 'fng-date-picker', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DatePickerComponent),
                             multi: true
                         }
-                    ],
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }]; }, propDecorators: { value: [{
+                    ], encapsulation: ViewEncapsulation.None, template: "<label #connector class=\"fng-date-picker fwe-input-text fwe-input-text-icon\" (click)=\"toggle($event)\">\n  <i\n    class=\"fwe-icon fwe-icon-time-calendar\"\n    [class.fwe-color-hero]=\"datePickerRef != null\"\n    [class.fwe-color-control-disabled]=\"disabled\"\n  ></i>\n  <input\n    aria-label=\"picked date\"\n    type=\"text\"\n    readonly\n    [required]=\"required === true || null\"\n    [class.fwe-border-hero]=\"datePickerRef != null\"\n    [value]=\"displayValue\"\n    [disabled]=\"disabled\"\n  />\n  <span class=\"fwe-input-text-label\"><ng-content></ng-content></span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n</label>\n", styles: [".fwe-border-hero{border-color:var(--fwe-hero)!important}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.Overlay }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [LOCALE_ID]
+                    }] }];
+    }, propDecorators: { value: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -4186,38 +4040,34 @@ class DateRangePickerComponent {
             this.dateRangePickerRef = null;
         }
         if (this.complete != null) {
-            this.complete.next();
+            this.complete.next(true);
             this.complete.complete();
         }
     }
 }
-DateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$1.Overlay }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
-DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: DateRangePickerComponent, selector: "fng-date-range-picker", inputs: { value: "value", disabled: "disabled", hint: "hint", error: "error", locale: "locale", format: "format", timezone: "timezone", options: "options", required: "required", width: "width" }, outputs: { fngChange: "fngChange", change: "change" }, host: { listeners: { "document:keydown": "hide($event)" }, properties: { "style.width": "this.width", "style.display": "this.display" } }, providers: [
+DateRangePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DateRangePickerComponent, deps: [{ token: i1$1.Overlay }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Component });
+DateRangePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: DateRangePickerComponent, selector: "fng-date-range-picker", inputs: { value: "value", disabled: "disabled", hint: "hint", error: "error", locale: "locale", format: "format", timezone: "timezone", options: "options", required: "required", width: "width" }, outputs: { fngChange: "fngChange", change: "change" }, host: { listeners: { "document:keydown": "hide($event)" }, properties: { "style.width": "this.width", "style.display": "this.display" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => DateRangePickerComponent),
             multi: true
         }
     ], viewQueries: [{ propertyName: "connector", first: true, predicate: ["connector"], descendants: true, static: true }], ngImport: i0, template: "<div #connector class=\"fng-date-range-picker\" (click)=\"toggle($event)\">\n  <label class=\"fwe-input-text fwe-input-text-icon\">\n    <i\n      class=\"fwe-icon fwe-icon-time-calendar\"\n      [class.fwe-color-hero]=\"dateRangePickerRef != null\"\n      [class.fwe-color-control-disabled]=\"disabled\"\n    ></i>\n    <div class=\"fng-date-range-picker-inputs\" [class.fng-date-range-picker-inputs--disabled]=\"disabled\">\n      <input\n        aria-label=\"picked start date\"\n        type=\"text\"\n        readonly\n        [required]=\"required === true || null\"\n        [class.fwe-border-hero]=\"dateRangePickerRef != null\"\n        [value]=\"fromDateDisplayValue\"\n        [disabled]=\"disabled\"\n      />\n      <input\n        aria-label=\"picked end date\"\n        type=\"text\"\n        readonly\n        [required]=\"required === true || null\"\n        [class.fwe-border-hero]=\"dateRangePickerRef != null\"\n        [value]=\"toDateDisplayValue\"\n        [disabled]=\"disabled\"\n      />\n    </div>\n    <span class=\"fwe-input-text-label\" [class.fwe-color-text-disabled]=\"disabled\"><ng-content></ng-content></span>\n    <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n    <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n  </label>\n</div>\n", styles: [".fwe-border-hero{border-color:var(--fwe-hero)!important}.fng-date-range-picker:hover input{color:var(--fwe-hero)}.fng-date-range-picker-inputs{display:flex;order:2;position:relative}.fng-date-range-picker-inputs--disabled:after{color:var(--fwe-text-disabled)}.fng-date-range-picker-inputs:after{position:absolute;content:\"-\";left:50%;top:50%;transform:translate(-50%,-50%);padding-right:32px}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: DateRangePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: DateRangePickerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-date-range-picker',
-                    templateUrl: './date-range-picker.component.html',
-                    styleUrls: ['./date-range-picker.component.scss'],
-                    providers: [
+            args: [{ selector: 'fng-date-range-picker', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => DateRangePickerComponent),
                             multi: true
                         }
-                    ],
-                    encapsulation: ViewEncapsulation.None
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }]; }, propDecorators: { value: [{
+                    ], encapsulation: ViewEncapsulation.None, template: "<div #connector class=\"fng-date-range-picker\" (click)=\"toggle($event)\">\n  <label class=\"fwe-input-text fwe-input-text-icon\">\n    <i\n      class=\"fwe-icon fwe-icon-time-calendar\"\n      [class.fwe-color-hero]=\"dateRangePickerRef != null\"\n      [class.fwe-color-control-disabled]=\"disabled\"\n    ></i>\n    <div class=\"fng-date-range-picker-inputs\" [class.fng-date-range-picker-inputs--disabled]=\"disabled\">\n      <input\n        aria-label=\"picked start date\"\n        type=\"text\"\n        readonly\n        [required]=\"required === true || null\"\n        [class.fwe-border-hero]=\"dateRangePickerRef != null\"\n        [value]=\"fromDateDisplayValue\"\n        [disabled]=\"disabled\"\n      />\n      <input\n        aria-label=\"picked end date\"\n        type=\"text\"\n        readonly\n        [required]=\"required === true || null\"\n        [class.fwe-border-hero]=\"dateRangePickerRef != null\"\n        [value]=\"toDateDisplayValue\"\n        [disabled]=\"disabled\"\n      />\n    </div>\n    <span class=\"fwe-input-text-label\" [class.fwe-color-text-disabled]=\"disabled\"><ng-content></ng-content></span>\n    <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n    <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n  </label>\n</div>\n", styles: [".fwe-border-hero{border-color:var(--fwe-hero)!important}.fng-date-range-picker:hover input{color:var(--fwe-hero)}.fng-date-range-picker-inputs{display:flex;order:2;position:relative}.fng-date-range-picker-inputs--disabled:after{color:var(--fwe-text-disabled)}.fng-date-range-picker-inputs:after{position:absolute;content:\"-\";left:50%;top:50%;transform:translate(-50%,-50%);padding-right:32px}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$1.Overlay }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [LOCALE_ID]
+                    }] }];
+    }, propDecorators: { value: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -4329,16 +4179,11 @@ class TimePickerDropdownComponent {
         }
     }
 }
-TimePickerDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TimePickerDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimePickerDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: TimePickerDropdownComponent, selector: "fng-time-picker-dropdown", inputs: { date: "date", showSeconds: "showSeconds", timeFormat: "timeFormat" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "document:keydown": "hide($event)" } }, viewQueries: [{ propertyName: "hoursInput", first: true, predicate: ["hoursInput"], descendants: true }], ngImport: i0, template: "<div class=\"fwe-timepicker\" [class.fwe-timepicker-am-pm]=\"timeFormat === '12'\">\n  <div class=\"fwe-timepicker-spinners\">\n    <div class=\"fwe-timepicker-spinners-hours\">\n      <button type=\"button\" aria-label=\"hour up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onHourUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input #hoursInput\n        aria-label=\"hours value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        tabindex=\"1\"\n        step=\"1\"\n        [value]=\"date | date: (timeFormat === '12' ? 'hh' : 'HH')\"\n        [attr.max]=\"timeFormat === '12' ? 12 : 23\"\n        (input)=\"onHourChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"hour down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onHourDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n    <div class=\"fwe-timepicker-spinners-minutes\">\n      <button type=\"button\" aria-label=\"minute up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onMinuteUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input\n        aria-label=\"minutes value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        max=\"59\"\n        step=\"1\"\n        tabindex=\"2\"\n        [value]=\"date | date:'mm'\"\n        (input)=\"onMinuteChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"minute down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onMinuteDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n    <div *ngIf=\"showSeconds\" class=\"fwe-timepicker-spinners-seconds\">\n      <button type=\"button\" aria-label=\"seconds up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onSecondUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input\n        aria-label=\"seconds value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        max=\"59\"\n        step=\"1\"\n        tabindex=\"3\"\n        [value]=\"date | date:'ss'\"\n        (input)=\"onSecondChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"seconds down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onSecondDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"timeFormat === '12'\" class=\"fwe-badge fwe-badge-control\">\n    {{ date | date:'a' }}\n  </span>\n</div>\n", styles: [".border-hero{border-color:var(--fwe-hero)!important}.fwe-timepicker{width:100%;max-width:100%}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "date": i1.DatePipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TimePickerDropdownComponent, decorators: [{
+TimePickerDropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimePickerDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TimePickerDropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TimePickerDropdownComponent, selector: "fng-time-picker-dropdown", inputs: { date: "date", showSeconds: "showSeconds", timeFormat: "timeFormat" }, outputs: { dateChange: "dateChange" }, host: { listeners: { "document:keydown": "hide($event)" } }, viewQueries: [{ propertyName: "hoursInput", first: true, predicate: ["hoursInput"], descendants: true }], ngImport: i0, template: "<div class=\"fwe-timepicker\" [class.fwe-timepicker-am-pm]=\"timeFormat === '12'\">\n  <div class=\"fwe-timepicker-spinners\">\n    <div class=\"fwe-timepicker-spinners-hours\">\n      <button type=\"button\" aria-label=\"hour up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onHourUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input\n        #hoursInput\n        aria-label=\"hours value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        tabindex=\"1\"\n        step=\"1\"\n        [value]=\"date | date: (timeFormat === '12' ? 'hh' : 'HH')\"\n        [attr.max]=\"timeFormat === '12' ? 12 : 23\"\n        (input)=\"onHourChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"hour down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onHourDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n    <div class=\"fwe-timepicker-spinners-minutes\">\n      <button type=\"button\" aria-label=\"minute up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onMinuteUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input\n        aria-label=\"minutes value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        max=\"59\"\n        step=\"1\"\n        tabindex=\"2\"\n        [value]=\"date | date: 'mm'\"\n        (input)=\"onMinuteChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"minute down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onMinuteDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n    <div *ngIf=\"showSeconds\" class=\"fwe-timepicker-spinners-seconds\">\n      <button type=\"button\" aria-label=\"seconds up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onSecondUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input\n        aria-label=\"seconds value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        max=\"59\"\n        step=\"1\"\n        tabindex=\"3\"\n        [value]=\"date | date: 'ss'\"\n        (input)=\"onSecondChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"seconds down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onSecondDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"timeFormat === '12'\" class=\"fwe-badge fwe-badge-control\">\n    {{ date | date: 'a' }}\n  </span>\n</div>\n", styles: [".border-hero{border-color:var(--fwe-hero)!important}.fwe-timepicker{width:100%;max-width:100%}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "date": i1.DatePipe }, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimePickerDropdownComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-time-picker-dropdown',
-                    templateUrl: './time-picker-dropdown.component.html',
-                    styleUrls: ['./time-picker-dropdown.component.scss'],
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-time-picker-dropdown', encapsulation: ViewEncapsulation.None, template: "<div class=\"fwe-timepicker\" [class.fwe-timepicker-am-pm]=\"timeFormat === '12'\">\n  <div class=\"fwe-timepicker-spinners\">\n    <div class=\"fwe-timepicker-spinners-hours\">\n      <button type=\"button\" aria-label=\"hour up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onHourUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input\n        #hoursInput\n        aria-label=\"hours value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        tabindex=\"1\"\n        step=\"1\"\n        [value]=\"date | date: (timeFormat === '12' ? 'hh' : 'HH')\"\n        [attr.max]=\"timeFormat === '12' ? 12 : 23\"\n        (input)=\"onHourChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"hour down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onHourDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n    <div class=\"fwe-timepicker-spinners-minutes\">\n      <button type=\"button\" aria-label=\"minute up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onMinuteUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input\n        aria-label=\"minutes value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        max=\"59\"\n        step=\"1\"\n        tabindex=\"2\"\n        [value]=\"date | date: 'mm'\"\n        (input)=\"onMinuteChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"minute down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onMinuteDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n    <div *ngIf=\"showSeconds\" class=\"fwe-timepicker-spinners-seconds\">\n      <button type=\"button\" aria-label=\"seconds up\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onSecondUp()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-expand\"></i>\n      </button>\n      <input\n        aria-label=\"seconds value\"\n        class=\"fwe-timepicker-hide-spinners\"\n        type=\"number\"\n        min=\"0\"\n        max=\"59\"\n        step=\"1\"\n        tabindex=\"3\"\n        [value]=\"date | date: 'ss'\"\n        (input)=\"onSecondChange($event)\"\n      />\n      <button type=\"button\" aria-label=\"seconds down\" class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onSecondDown()\">\n        <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-arrows-collapse\"></i>\n      </button>\n    </div>\n  </div>\n  <span *ngIf=\"timeFormat === '12'\" class=\"fwe-badge fwe-badge-control\">\n    {{ date | date: 'a' }}\n  </span>\n</div>\n", styles: [".border-hero{border-color:var(--fwe-hero)!important}.fwe-timepicker{width:100%;max-width:100%}\n"] }]
         }], propDecorators: { date: [{
                 type: Input
             }], showSeconds: [{
@@ -4482,34 +4327,28 @@ class TimePickerComponent {
             this.timePickerRef = null;
         }
         if (this.complete != null) {
-            this.complete.next();
+            this.complete.next(true);
             this.complete.complete();
         }
     }
 }
-TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TimePickerComponent, deps: [{ token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
-TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: TimePickerComponent, selector: "fng-time-picker", inputs: { value: "value", disabled: "disabled", required: "required", hint: "hint", error: "error", options: "options", width: "width" }, host: { listeners: { "document:keydown": "hide($event)" }, properties: { "style.width": "this.width", "style.display": "this.display" } }, providers: [
+TimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimePickerComponent, deps: [{ token: i1$1.Overlay }], target: i0.ɵɵFactoryTarget.Component });
+TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TimePickerComponent, selector: "fng-time-picker", inputs: { value: "value", disabled: "disabled", required: "required", hint: "hint", error: "error", options: "options", width: "width" }, host: { listeners: { "document:keydown": "hide($event)" }, properties: { "style.width": "this.width", "style.display": "this.display" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => TimePickerComponent),
             multi: true
         }
     ], viewQueries: [{ propertyName: "connector", first: true, predicate: ["connector"], descendants: true, static: true }], ngImport: i0, template: "<label #connector class=\"fng-time-picker fwe-input-text fwe-input-text-icon\" (click)=\"toggle($event)\">\n  <i class=\"fwe-icon fwe-icon-time-time\" [class.fwe-color-hero]=\"timePickerRef != null\" [class.fwe-color-control-disabled]=\"disabled\"></i>\n  <input\n    aria-label=\"picked time\"\n    type=\"text\"\n    readonly\n    [required]=\"required === true || null\"\n    [class.fwe-border-hero]=\"timePickerRef != null\"\n    [value]=\"value | date: timeFormat\"\n    [disabled]=\"disabled\"\n  />\n  <span class=\"fwe-input-text-label\"><ng-content></ng-content></span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n</label>\n", styles: [".fng-first-child-fullwidth fng-time-picker-dropdown{width:100%}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "date": i1.DatePipe }, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-time-picker',
-                    templateUrl: './time-picker.component.html',
-                    styleUrls: ['./time-picker.component.scss'],
-                    providers: [
+            args: [{ selector: 'fng-time-picker', providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TimePickerComponent),
                             multi: true
                         }
-                    ],
-                    encapsulation: ViewEncapsulation.None
-                }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<label #connector class=\"fng-time-picker fwe-input-text fwe-input-text-icon\" (click)=\"toggle($event)\">\n  <i class=\"fwe-icon fwe-icon-time-time\" [class.fwe-color-hero]=\"timePickerRef != null\" [class.fwe-color-control-disabled]=\"disabled\"></i>\n  <input\n    aria-label=\"picked time\"\n    type=\"text\"\n    readonly\n    [required]=\"required === true || null\"\n    [class.fwe-border-hero]=\"timePickerRef != null\"\n    [value]=\"value | date: timeFormat\"\n    [disabled]=\"disabled\"\n  />\n  <span class=\"fwe-input-text-label\"><ng-content></ng-content></span>\n  <span *ngIf=\"hint\" class=\"fwe-input-text-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fwe-input-text-invalid\">{{ error }}</span>\n</label>\n", styles: [".fng-first-child-fullwidth fng-time-picker-dropdown{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i1$1.Overlay }]; }, propDecorators: { value: [{
                 type: Input
             }], disabled: [{
@@ -4751,29 +4590,23 @@ class TextEditorComponent extends ValueAccessorBaseDirective {
         return value.replace(/&#9;/gi, '###tab###');
     }
 }
-TextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TextEditorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-TextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: TextEditorComponent, selector: "fng-text-editor", inputs: { config: "config", modules: "modules", label: "label", readOnly: "readOnly", maxLength: "maxLength", error: "error", hint: "hint", value: "value" }, outputs: { fngChange: "fngChange", change: "change" }, providers: [
+TextEditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TextEditorComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
+TextEditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: TextEditorComponent, selector: "fng-text-editor", inputs: { config: "config", modules: "modules", label: "label", readOnly: "readOnly", maxLength: "maxLength", error: "error", hint: "hint", value: "value" }, outputs: { fngChange: "fngChange", change: "change" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => TextEditorComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "btnBold", first: true, predicate: ["btnBold"], descendants: true }, { propertyName: "btnItalic", first: true, predicate: ["btnItalic"], descendants: true }, { propertyName: "btnUnderline", first: true, predicate: ["btnUnderline"], descendants: true }, { propertyName: "btnAlignCenter", first: true, predicate: ["btnAlignCenter"], descendants: true }, { propertyName: "btnAlignRight", first: true, predicate: ["btnAlignRight"], descendants: true }, { propertyName: "btnLink", first: true, predicate: ["btnLink"], descendants: true }, { propertyName: "btnUl", first: true, predicate: ["btnUl"], descendants: true }, { propertyName: "btnOl", first: true, predicate: ["btnOl"], descendants: true }, { propertyName: "btnImage", first: true, predicate: ["btnImage"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label class=\"fwe-input-text\" [class.fwe-disabled]=\"disabled\">\n  <div class=\"fng-editor-toolbar\" [id]=\"'editor-toolbar-' + id\">\n    <span class=\"ql-formats fwe-d-none\">\n      <select class=\"ql-size\" aria-hidden=\"true\">\n        <option value=\"small\"></option>\n        <option selected></option>\n        <option value=\"large\"></option>\n        <option value=\"huge\"></option>\n      </select>\n    </span>\n    <span class=\"ql-formats fng-editor-toolbar-buttons-container fwe-mr-3\">\n      <ng-container *ngIf=\"config?.toolbar?.bold\">\n        <button type=\"button\" #btnBold class=\"ql-bold fwe-d-none action-bold\" aria-hidden=\"true\"></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-button\"\n          [class.fwe-mr-3]=\"config?.toolbar?.underline || config?.toolbar?.italic\"\n          (click)=\"delegate($event, 'bold')\"\n          [disabled]=\"disabled\"\n        >\n          <div class=\"fng-button-text fng-text-bold\">B</div>\n        </button>\n      </ng-container>\n      <ng-container *ngIf=\"config?.toolbar?.italic\">\n        <button type=\"button\" #btnItalic class=\"ql-italic fwe-d-none action-italic\" aria-hidden=\"true\"></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-button\"\n          [class.fwe-mr-3]=\"config?.toolbar?.underline\"\n          (click)=\"delegate($event, 'italic')\"\n          [disabled]=\"disabled\"\n        >\n          <div class=\"fng-button-text fng-text-italic\">I</div>\n        </button>\n      </ng-container>\n      <ng-container *ngIf=\"config?.toolbar?.underline\">\n        <button type=\"button\" #btnUnderline class=\"ql-underline fwe-d-none action-underline\" aria-hidden=\"true\"></button>\n        <button type=\"button\" class=\"fwe-btn fng-button\" (click)=\"delegate($event, 'underline')\" [disabled]=\"disabled\">\n          <div class=\"fng-button-text fng-text-underline\">U</div>\n        </button>\n      </ng-container>\n\n      <div *ngIf=\"!hideDivider('typo')\" class=\"fng-divider-y fwe-mx-4\"></div>\n\n      <ng-container *ngIf=\"config?.toolbar?.alignCenter\">\n        <button\n          type=\"button\"\n          #btnAlignCenter\n          class=\"ql-align fwe-d-none action-align-center\"\n          aria-hidden=\"true\"\n          value=\"center\"\n        ></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-btn-toolbar-list fng-button\"\n          [class.fwe-mr-3]=\"config?.toolbar?.alignRight\"\n          (click)=\"delegate($event, 'align-center')\"\n          [disabled]=\"disabled\"\n        >\n          <i class=\"fwe-icon fwe-icon-toolbar-list fng-icon-text-align-center fwe-pr-0\" [class.fng-gray]=\"disabled\"></i>\n        </button>\n      </ng-container>\n\n      <ng-container *ngIf=\"config?.toolbar?.alignRight\">\n        <button type=\"button\" #btnAlignRight class=\"ql-align fwe-d-none action-align-right\" aria-hidden=\"true\" value=\"right\"></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-btn-toolbar-list fng-button\"\n          (click)=\"delegate($event, 'align-right')\"\n          [disabled]=\"disabled\"\n        >\n          <i class=\"fwe-icon fwe-icon-toolbar-list fng-icon-text-align-right fwe-pr-0\" [class.fng-gray]=\"disabled\"></i>\n        </button>\n      </ng-container>\n\n      <div *ngIf=\"!hideDivider('text-align')\" class=\"fng-divider-y fwe-mx-4\"></div>\n\n      <ng-container *ngIf=\"config?.toolbar?.bulletList\">\n        <button type=\"button\" #btnUl class=\"ql-list fwe-d-none action-ul\" aria-hidden=\"true\" value=\"bullet\"></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-btn-toolbar-list fng-button\"\n          [class.fwe-mr-3]=\"config?.toolbar?.orderedList\"\n          (click)=\"delegate($event, 'ul')\"\n          [disabled]=\"disabled\"\n        >\n          <i class=\"fwe-icon fwe-icon-toolbar-list fwe-icon-list-list-view fwe-pr-0\"></i>\n        </button>\n      </ng-container>\n      <ng-container *ngIf=\"config?.toolbar?.orderedList\">\n        <button type=\"button\" #btnOl class=\"ql-list fwe-d-none action-ol\" aria-hidden=\"true\" value=\"ordered\"></button>\n        <button type=\"button\" class=\"fwe-btn fng-btn-toolbar-list fng-button\" (click)=\"delegate($event, 'ol')\" [disabled]=\"disabled\">\n          <i class=\"fwe-icon fwe-icon-toolbar-list fwe-icon-enumeration fwe-pr-0\"></i>\n        </button>\n      </ng-container>\n\n      <div *ngIf=\"!hideDivider('lists')\" class=\"fng-divider-y fwe-mx-4\"></div>\n\n      <ng-container *ngIf=\"config?.toolbar?.image\">\n        <button type=\"button\" class=\"fwe-btn fng-btn-toolbar-list fng-button\" (click)=\"delegate($event, 'image')\" [disabled]=\"disabled\">\n          <i class=\"fwe-icon fwe-icon-toolbar-list fwe-icon-image-image fwe-pr-0\"></i>\n        </button>\n        <button type=\"button\" #btnImage class=\"ql-image fwe-d-none\" aria-hidden=\"true\"></button>\n      </ng-container>\n\n      <div *ngIf=\"!hideDivider('image')\" class=\"fng-divider-y fwe-mx-4\"></div>\n\n      <ng-container *ngIf=\"config?.toolbar?.link\">\n        <button type=\"button\" class=\"fwe-btn fng-btn-toolbar-list fng-button\" (click)=\"delegate($event, 'link')\" [disabled]=\"disabled\">\n          <i class=\"fwe-icon fwe-icon-toolbar-list fwe-icon-file-link fwe-pr-0\"></i>\n        </button>\n        <button type=\"button\" #btnLink class=\"ql-link fwe-d-none\" aria-hidden=\"true\"></button>\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"fng-editor-container\" [id]=\"'editor-container-' + id\">\n    <div class=\"fng-editor\" [id]=\"'editor-' + id\"></div>\n  </div>\n  <span class=\"fwe-input-text-label\" [id]=\"'editor-label-' + id\">{{ label }}</span>\n  <span *ngIf=\"hint\" class=\"fng-text-editor-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fng-text-editor-invalid\">{{ error }}</span>\n  <span *ngIf=\"maxLength > 0 && value != null\" class=\"fwe-input-text-count\">{{ currentLength() }} / {{ maxLength }}</span>\n</label>\n", styles: ["@charset \"UTF-8\";.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container.ql-disabled .ql-editor ul[data-checked]>li:before{pointer-events:none}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;-o-tab-size:4;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor ul,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ul{padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li:before{content:\"\\2022\"}.ql-editor ul[data-checked=true],.ql-editor ul[data-checked=false]{pointer-events:none}.ql-editor ul[data-checked=true]>li *,.ql-editor ul[data-checked=false]>li *{pointer-events:all}.ql-editor ul[data-checked=true]>li:before,.ql-editor ul[data-checked=false]>li:before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li:before{content:\"\\2611\"}.ql-editor ul[data-checked=false]>li:before{content:\"\\2610\"}.ql-editor li:before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl):before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl:before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) \". \"}.ql-editor ol li.ql-indent-1{counter-increment:list-1}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) \". \"}.ql-editor ol li.ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2{counter-increment:list-2}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) \". \"}.ql-editor ol li.ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3{counter-increment:list-3}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) \". \"}.ql-editor ol li.ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4{counter-increment:list-4}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) \". \"}.ql-editor ol li.ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5{counter-increment:list-5}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) \". \"}.ql-editor ol li.ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-6{counter-increment:list-6}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) \". \"}.ql-editor ol li.ql-indent-6{counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-7{counter-increment:list-7}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) \". \"}.ql-editor ol li.ql-indent-7{counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-8{counter-increment:list-8}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) \". \"}.ql-editor ol li.ql-indent-8{counter-reset:list-9}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer: coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor pre{white-space:pre-wrap;margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor pre.ql-syntax{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:\"Helvetica Neue\",\"Helvetica\",\"Arial\",sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0px}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0px;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}fng-text-editor .fng-divider-y{display:inline-flex;flex:0 0 1px;height:24px;width:1px;background-color:var(--fwe-gray-400)}fng-text-editor .fng-editor{min-height:100%}fng-text-editor .fng-editor-container{order:2;height:160px;min-height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--fwe-control-scrollbar) var(--fwe-gray-100);margin-top:8px;padding-bottom:4px;border-bottom:var(--fwe-gray-400) solid 1px}fng-text-editor .fng-editor-container::-webkit-scrollbar{width:12px}fng-text-editor .fng-editor-container::-webkit-scrollbar-track{background:transparent}fng-text-editor .fng-editor-container::-webkit-scrollbar-thumb{overflow:visible;background-color:var(--fwe-control-scrollbar);border:3px solid rgba(242,243,245,0);-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:6px}fng-text-editor .fng-editor-container:hover{border-bottom:var(--fwe-hero) solid 1px}fng-text-editor .fng-editor-container[contenteditable=true]{outline:none}fng-text-editor .fng-editor-container[contenteditable=true]:focus{border-bottom:var(--fwe-hero) solid 1px}fng-text-editor label.fwe-input-text{line-height:24px}fng-text-editor label.fwe-input-text .fwe-input-text-count{display:inline-block;line-height:1.5;position:absolute;right:0;bottom:0;z-index:1;color:var(--fwe-text-disabled);font-size:12px}fng-text-editor label.fwe-input-text .fwe-input-text-label{order:-1}fng-text-editor label.fwe-input-text .fng-text-editor-info{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:1.5;position:absolute;left:0;top:unset;bottom:0;z-index:2;color:var(--fwe-text-disabled);font-size:12px}fng-text-editor label.fwe-input-text.fwe-disabled{color:var(--fwe-text-disabled)}fng-text-editor label.fwe-input-text.fwe-disabled .fwe-input-text-label{color:var(--fwe-text-disabled)}fng-text-editor label.fwe-input-text.fwe-disabled .fng-editor-container{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-editor label.fwe-input-text.fwe-disabled .fng-editor-container:hover{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-editor label.fwe-input-text.fwe-disabled .fng-divider-y{background-color:var(--fwe-text-disabled)}fng-text-editor .fng-text-editor-invalid{display:none;line-height:1.5;position:absolute;left:0;bottom:0;z-index:2;color:var(--fwe-red);font-size:12px}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor{box-shadow:none;outline:none}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fwe-input-text-label,fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fng-text-editor-invalid,fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fng-text-editor-info{color:var(--fwe-text-disabled)}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fwe-input-text-label:after,fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fng-text-editor-invalid:after,fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fng-text-editor-info:after{color:var(--fwe-text-disabled)}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor-container{border-bottom:1px solid var(--fwe-red)}fng-text-editor.ng-dirty.ng-invalid .fng-text-editor-info{display:none!important}fng-text-editor.ng-dirty.ng-invalid .fng-text-editor-invalid{display:block!important}fng-text-editor .fng-text-bold{font-weight:700}fng-text-editor .fng-text-italic{font-style:italic}fng-text-editor .fng-text-underline{text-decoration:underline}fng-text-editor .fng-icon-text-align-center{width:12px;height:10px;background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" fill=\"rgb(51, 51, 51)\" viewBox=\"0 0 12 10\"><path d=\"M2,3H14V5H2Z\" transform=\"translate(-2 -3)\"/><path d=\"M5,7h6V9H5Z\" transform=\"translate(-2 -3)\"/><path d=\"M2,11H14v2H2Z\" transform=\"translate(-2 -3)\"/></svg>')}fng-text-editor .fng-icon-text-align-center.fng-gray{background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" fill=\"rgb(185, 186, 187)\" viewBox=\"0 0 12 10\"><path d=\"M2,3H14V5H2Z\" transform=\"translate(-2 -3)\"/><path d=\"M5,7h6V9H5Z\" transform=\"translate(-2 -3)\"/><path d=\"M2,11H14v2H2Z\" transform=\"translate(-2 -3)\"/></svg>')}fng-text-editor .fng-icon-text-align-right{width:12px;height:10px;background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" fill=\"rgb(51, 51, 51)\" viewBox=\"0 0 12 10\"><path d=\"M2,3H14V5H2Z\" transform=\"translate(-2 -3)\"/><path d=\"M8,7h6V9H8Z\" transform=\"translate(-2 -3)\"/><path d=\"M2,11H14v2H2Z\" transform=\"translate(-2 -3)\"/></svg>')}fng-text-editor .fng-icon-text-align-right.fng-gray{background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" fill=\"rgb(185, 186, 187)\" viewBox=\"0 0 12 10\"><path d=\"M2,3H14V5H2Z\" transform=\"translate(-2 -3)\"/><path d=\"M8,7h6V9H8Z\" transform=\"translate(-2 -3)\"/><path d=\"M2,11H14v2H2Z\" transform=\"translate(-2 -3)\"/></svg>')}fng-text-editor .ql-tooltip{z-index:var(--fwe-z-index-tooltip)}fng-text-editor .ql-editor{font-family:\"MetaPro\",-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,\"Noto Sans\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";font-size:16px;padding:0;min-height:72px;overflow-x:hidden}fng-text-editor .ql-editor p::-moz-selection,fng-text-editor .ql-editor strong::-moz-selection,fng-text-editor .ql-editor em::-moz-selection,fng-text-editor .ql-editor u::-moz-selection,fng-text-editor .ql-editor ul::-moz-selection,fng-text-editor .ql-editor ol::-moz-selection,fng-text-editor .ql-editor li::-moz-selection,fng-text-editor .ql-editor a::-moz-selection{background:var(--fwe-icon-hero-light)}fng-text-editor .ql-editor p::selection,fng-text-editor .ql-editor strong::selection,fng-text-editor .ql-editor em::selection,fng-text-editor .ql-editor u::selection,fng-text-editor .ql-editor ul::selection,fng-text-editor .ql-editor ol::selection,fng-text-editor .ql-editor li::selection,fng-text-editor .ql-editor a::selection{background:var(--fwe-icon-hero-light)}fng-text-editor .ql-container.ql-snow{border:0;background-color:var(--fwe-white)}fng-text-editor .ql-container.ql-snow .ql-tooltip{transform:translate(160px,12px);color:var(--fwe-black);box-shadow:-1px 1px 4px -1px #3333;border:1px solid var(--fwe-gray-200)}fng-text-editor .ql-container.ql-snow .ql-tooltip input{border:1px solid var(--fwe-gray-200)}fng-text-editor .ql-container.ql-snow .ql-tooltip input::-moz-selection{background:var(--fwe-icon-hero-light)}fng-text-editor .ql-container.ql-snow .ql-tooltip input::selection{background:var(--fwe-icon-hero-light)}fng-text-editor .ql-container.ql-snow a{color:var(--fwe-caerul)}fng-text-editor .ql-toolbar.ql-snow{border:0;padding:4px 0;border-bottom:1px solid var(--fwe-gray-400)}fng-text-editor .ql-toolbar.ql-snow .ql-formats.fng-editor-toolbar-buttons-container{display:flex;align-items:center;flex-wrap:wrap}fng-text-editor .ql-toolbar.ql-snow button{line-height:normal;box-sizing:border-box;display:inline-flex;text-align:center;padding:0 8px;height:32px;min-height:unset;color:var(--fwe-black);background:none;border-radius:4px;cursor:pointer;border:none;width:unset;max-width:24px;justify-content:center;align-items:center;float:unset}@media (hover: hover) and (pointer: fine){fng-text-editor .ql-toolbar.ql-snow button:hover{background-color:var(--fwe-control-dark);color:var(--fwe-black)}}fng-text-editor .ql-toolbar.ql-snow button:active{background-color:var(--fwe-control-darker)}fng-text-editor .ql-toolbar.ql-snow button.ql-active+button{background-color:var(--fwe-control)}fng-text-editor .ql-toolbar.ql-snow button.fng-btn-toolbar-list{padding:0 6px}fng-text-editor .ql-toolbar.ql-snow button.fng-button i{pointer-events:none}fng-text-editor .ql-toolbar.ql-snow button.fng-button div{pointer-events:none}fng-text-editor .ql-toolbar .fng-button-text{min-width:12px;line-height:16px}fng-text-editor label.fwe-input-text.fwe-disabled .ql-toolbar{pointer-events:none}fng-text-editor label.fwe-input-text.fwe-disabled .ql-toolbar button{color:var(--fwe-text-disabled)}\n"], directives: [{ type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: TextEditorComponent, decorators: [{
+    ], viewQueries: [{ propertyName: "btnBold", first: true, predicate: ["btnBold"], descendants: true }, { propertyName: "btnItalic", first: true, predicate: ["btnItalic"], descendants: true }, { propertyName: "btnUnderline", first: true, predicate: ["btnUnderline"], descendants: true }, { propertyName: "btnAlignCenter", first: true, predicate: ["btnAlignCenter"], descendants: true }, { propertyName: "btnAlignRight", first: true, predicate: ["btnAlignRight"], descendants: true }, { propertyName: "btnLink", first: true, predicate: ["btnLink"], descendants: true }, { propertyName: "btnUl", first: true, predicate: ["btnUl"], descendants: true }, { propertyName: "btnOl", first: true, predicate: ["btnOl"], descendants: true }, { propertyName: "btnImage", first: true, predicate: ["btnImage"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label class=\"fwe-input-text\" [class.fwe-disabled]=\"disabled\">\n  <div class=\"fng-editor-toolbar\" [id]=\"'editor-toolbar-' + id\">\n    <span class=\"ql-formats fwe-d-none\">\n      <select class=\"ql-size\" aria-hidden=\"true\">\n        <option value=\"small\"></option>\n        <option selected></option>\n        <option value=\"large\"></option>\n        <option value=\"huge\"></option>\n      </select>\n    </span>\n    <span class=\"ql-formats fng-editor-toolbar-buttons-container fwe-mr-3\">\n      <ng-container *ngIf=\"config?.toolbar?.bold\">\n        <button type=\"button\" #btnBold class=\"ql-bold fwe-d-none action-bold\" aria-hidden=\"true\"></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-button\"\n          [class.fwe-mr-3]=\"config?.toolbar?.underline || config?.toolbar?.italic\"\n          (click)=\"delegate($event, 'bold')\"\n          [disabled]=\"disabled\"\n        >\n          <div class=\"fng-button-text fng-text-bold\">B</div>\n        </button>\n      </ng-container>\n      <ng-container *ngIf=\"config?.toolbar?.italic\">\n        <button type=\"button\" #btnItalic class=\"ql-italic fwe-d-none action-italic\" aria-hidden=\"true\"></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-button\"\n          [class.fwe-mr-3]=\"config?.toolbar?.underline\"\n          (click)=\"delegate($event, 'italic')\"\n          [disabled]=\"disabled\"\n        >\n          <div class=\"fng-button-text fng-text-italic\">I</div>\n        </button>\n      </ng-container>\n      <ng-container *ngIf=\"config?.toolbar?.underline\">\n        <button type=\"button\" #btnUnderline class=\"ql-underline fwe-d-none action-underline\" aria-hidden=\"true\"></button>\n        <button type=\"button\" class=\"fwe-btn fng-button\" (click)=\"delegate($event, 'underline')\" [disabled]=\"disabled\">\n          <div class=\"fng-button-text fng-text-underline\">U</div>\n        </button>\n      </ng-container>\n\n      <div *ngIf=\"!hideDivider('typo')\" class=\"fng-divider-y fwe-mx-4\"></div>\n\n      <ng-container *ngIf=\"config?.toolbar?.alignCenter\">\n        <button type=\"button\" #btnAlignCenter class=\"ql-align fwe-d-none action-align-center\" aria-hidden=\"true\" value=\"center\"></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-btn-toolbar-list fng-button\"\n          [class.fwe-mr-3]=\"config?.toolbar?.alignRight\"\n          (click)=\"delegate($event, 'align-center')\"\n          [disabled]=\"disabled\"\n        >\n          <i class=\"fwe-icon fwe-icon-toolbar-list fng-icon-text-align-center fwe-pr-0\" [class.fng-gray]=\"disabled\"></i>\n        </button>\n      </ng-container>\n\n      <ng-container *ngIf=\"config?.toolbar?.alignRight\">\n        <button type=\"button\" #btnAlignRight class=\"ql-align fwe-d-none action-align-right\" aria-hidden=\"true\" value=\"right\"></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-btn-toolbar-list fng-button\"\n          (click)=\"delegate($event, 'align-right')\"\n          [disabled]=\"disabled\"\n        >\n          <i class=\"fwe-icon fwe-icon-toolbar-list fng-icon-text-align-right fwe-pr-0\" [class.fng-gray]=\"disabled\"></i>\n        </button>\n      </ng-container>\n\n      <div *ngIf=\"!hideDivider('text-align')\" class=\"fng-divider-y fwe-mx-4\"></div>\n\n      <ng-container *ngIf=\"config?.toolbar?.bulletList\">\n        <button type=\"button\" #btnUl class=\"ql-list fwe-d-none action-ul\" aria-hidden=\"true\" value=\"bullet\"></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-btn-toolbar-list fng-button\"\n          [class.fwe-mr-3]=\"config?.toolbar?.orderedList\"\n          (click)=\"delegate($event, 'ul')\"\n          [disabled]=\"disabled\"\n        >\n          <i class=\"fwe-icon fwe-icon-toolbar-list fwe-icon-list-list-view fwe-pr-0\"></i>\n        </button>\n      </ng-container>\n      <ng-container *ngIf=\"config?.toolbar?.orderedList\">\n        <button type=\"button\" #btnOl class=\"ql-list fwe-d-none action-ol\" aria-hidden=\"true\" value=\"ordered\"></button>\n        <button type=\"button\" class=\"fwe-btn fng-btn-toolbar-list fng-button\" (click)=\"delegate($event, 'ol')\" [disabled]=\"disabled\">\n          <i class=\"fwe-icon fwe-icon-toolbar-list fwe-icon-enumeration fwe-pr-0\"></i>\n        </button>\n      </ng-container>\n\n      <div *ngIf=\"!hideDivider('lists')\" class=\"fng-divider-y fwe-mx-4\"></div>\n\n      <ng-container *ngIf=\"config?.toolbar?.image\">\n        <button type=\"button\" class=\"fwe-btn fng-btn-toolbar-list fng-button\" (click)=\"delegate($event, 'image')\" [disabled]=\"disabled\">\n          <i class=\"fwe-icon fwe-icon-toolbar-list fwe-icon-image-image fwe-pr-0\"></i>\n        </button>\n        <button type=\"button\" #btnImage class=\"ql-image fwe-d-none\" aria-hidden=\"true\"></button>\n      </ng-container>\n\n      <div *ngIf=\"!hideDivider('image')\" class=\"fng-divider-y fwe-mx-4\"></div>\n\n      <ng-container *ngIf=\"config?.toolbar?.link\">\n        <button type=\"button\" class=\"fwe-btn fng-btn-toolbar-list fng-button\" (click)=\"delegate($event, 'link')\" [disabled]=\"disabled\">\n          <i class=\"fwe-icon fwe-icon-toolbar-list fwe-icon-file-link fwe-pr-0\"></i>\n        </button>\n        <button type=\"button\" #btnLink class=\"ql-link fwe-d-none\" aria-hidden=\"true\"></button>\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"fng-editor-container\" [id]=\"'editor-container-' + id\">\n    <div class=\"fng-editor\" [id]=\"'editor-' + id\"></div>\n  </div>\n  <span class=\"fwe-input-text-label\" [id]=\"'editor-label-' + id\">{{ label }}</span>\n  <span *ngIf=\"hint\" class=\"fng-text-editor-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fng-text-editor-invalid\">{{ error }}</span>\n  <span *ngIf=\"maxLength > 0 && value != null\" class=\"fwe-input-text-count\">{{ currentLength() }} / {{ maxLength }}</span>\n</label>\n", styles: ["@charset \"UTF-8\";/*!\n * Quill Editor v1.3.7\n * https://quilljs.com/\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container.ql-disabled .ql-editor ul[data-checked]>li:before{pointer-events:none}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor ul,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ul{padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li:before{content:\"\\2022\"}.ql-editor ul[data-checked=true],.ql-editor ul[data-checked=false]{pointer-events:none}.ql-editor ul[data-checked=true]>li *,.ql-editor ul[data-checked=false]>li *{pointer-events:all}.ql-editor ul[data-checked=true]>li:before,.ql-editor ul[data-checked=false]>li:before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li:before{content:\"\\2611\"}.ql-editor ul[data-checked=false]>li:before{content:\"\\2610\"}.ql-editor li:before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl):before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl:before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) \". \"}.ql-editor ol li.ql-indent-1{counter-increment:list-1}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) \". \"}.ql-editor ol li.ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2{counter-increment:list-2}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) \". \"}.ql-editor ol li.ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3{counter-increment:list-3}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) \". \"}.ql-editor ol li.ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4{counter-increment:list-4}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) \". \"}.ql-editor ol li.ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5{counter-increment:list-5}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) \". \"}.ql-editor ol li.ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-6{counter-increment:list-6}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) \". \"}.ql-editor ol li.ql-indent-6{counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-7{counter-increment:list-7}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) \". \"}.ql-editor ol li.ql-indent-7{counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-8{counter-increment:list-8}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) \". \"}.ql-editor ol li.ql-indent-8{counter-reset:list-9}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}/*!\n * Quill Editor v1.3.7\n * https://quilljs.com/\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container.ql-disabled .ql-editor ul[data-checked]>li:before{pointer-events:none}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor ul,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ul{padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li:before{content:\"\\2022\"}.ql-editor ul[data-checked=true],.ql-editor ul[data-checked=false]{pointer-events:none}.ql-editor ul[data-checked=true]>li *,.ql-editor ul[data-checked=false]>li *{pointer-events:all}.ql-editor ul[data-checked=true]>li:before,.ql-editor ul[data-checked=false]>li:before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li:before{content:\"\\2611\"}.ql-editor ul[data-checked=false]>li:before{content:\"\\2610\"}.ql-editor li:before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl):before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl:before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) \". \"}.ql-editor ol li.ql-indent-1{counter-increment:list-1}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) \". \"}.ql-editor ol li.ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2{counter-increment:list-2}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) \". \"}.ql-editor ol li.ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3{counter-increment:list-3}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) \". \"}.ql-editor ol li.ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4{counter-increment:list-4}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) \". \"}.ql-editor ol li.ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5{counter-increment:list-5}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) \". \"}.ql-editor ol li.ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-6{counter-increment:list-6}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) \". \"}.ql-editor ol li.ql-indent-6{counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-7{counter-increment:list-7}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) \". \"}.ql-editor ol li.ql-indent-7{counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-8{counter-increment:list-8}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) \". \"}.ql-editor ol li.ql-indent-8{counter-reset:list-9}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer: coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor pre{white-space:pre-wrap;margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor pre.ql-syntax{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0px}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0px;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}fng-text-editor .fng-divider-y{display:inline-flex;flex:0 0 1px;height:24px;width:1px;background-color:var(--fwe-gray-400)}fng-text-editor .fng-editor{min-height:100%}fng-text-editor .fng-editor-container{order:2;height:160px;min-height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--fwe-control-scrollbar) var(--fwe-gray-100);margin-top:8px;padding-bottom:4px;border-bottom:var(--fwe-gray-400) solid 1px}fng-text-editor .fng-editor-container::-webkit-scrollbar{width:12px}fng-text-editor .fng-editor-container::-webkit-scrollbar-track{background:transparent}fng-text-editor .fng-editor-container::-webkit-scrollbar-thumb{overflow:visible;background-color:var(--fwe-control-scrollbar);border:3px solid rgba(242,243,245,0);-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:6px}fng-text-editor .fng-editor-container:hover{border-bottom:var(--fwe-hero) solid 1px}fng-text-editor .fng-editor-container[contenteditable=true]{outline:none}fng-text-editor .fng-editor-container[contenteditable=true]:focus{border-bottom:var(--fwe-hero) solid 1px}fng-text-editor label.fwe-input-text{line-height:24px}fng-text-editor label.fwe-input-text .fwe-input-text-count{display:inline-block;line-height:1.5;position:absolute;right:0;bottom:0;z-index:1;color:var(--fwe-text-disabled);font-size:12px}fng-text-editor label.fwe-input-text .fwe-input-text-label{order:-1}fng-text-editor label.fwe-input-text .fng-text-editor-info{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:1.5;position:absolute;left:0;top:unset;bottom:0;z-index:2;color:var(--fwe-text-disabled);font-size:12px}fng-text-editor label.fwe-input-text.fwe-disabled{color:var(--fwe-text-disabled)}fng-text-editor label.fwe-input-text.fwe-disabled .fwe-input-text-label{color:var(--fwe-text-disabled)}fng-text-editor label.fwe-input-text.fwe-disabled .fng-editor-container{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-editor label.fwe-input-text.fwe-disabled .fng-editor-container:hover{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-editor label.fwe-input-text.fwe-disabled .fng-divider-y{background-color:var(--fwe-text-disabled)}fng-text-editor .fng-text-editor-invalid{display:none;line-height:1.5;position:absolute;left:0;bottom:0;z-index:2;color:var(--fwe-red);font-size:12px}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor{box-shadow:none;outline:none}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fwe-input-text-label,fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fng-text-editor-invalid,fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fng-text-editor-info{color:var(--fwe-text-disabled)}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fwe-input-text-label:after,fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fng-text-editor-invalid:after,fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fng-text-editor-info:after{color:var(--fwe-text-disabled)}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor-container{border-bottom:1px solid var(--fwe-red)}fng-text-editor.ng-dirty.ng-invalid .fng-text-editor-info{display:none!important}fng-text-editor.ng-dirty.ng-invalid .fng-text-editor-invalid{display:block!important}fng-text-editor .fng-text-bold{font-weight:700}fng-text-editor .fng-text-italic{font-style:italic}fng-text-editor .fng-text-underline{text-decoration:underline}fng-text-editor .fng-icon-text-align-center{width:12px;height:10px;background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" fill=\"rgb(51, 51, 51)\" viewBox=\"0 0 12 10\"><path d=\"M2,3H14V5H2Z\" transform=\"translate(-2 -3)\"/><path d=\"M5,7h6V9H5Z\" transform=\"translate(-2 -3)\"/><path d=\"M2,11H14v2H2Z\" transform=\"translate(-2 -3)\"/></svg>')}fng-text-editor .fng-icon-text-align-center.fng-gray{background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" fill=\"rgb(185, 186, 187)\" viewBox=\"0 0 12 10\"><path d=\"M2,3H14V5H2Z\" transform=\"translate(-2 -3)\"/><path d=\"M5,7h6V9H5Z\" transform=\"translate(-2 -3)\"/><path d=\"M2,11H14v2H2Z\" transform=\"translate(-2 -3)\"/></svg>')}fng-text-editor .fng-icon-text-align-right{width:12px;height:10px;background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" fill=\"rgb(51, 51, 51)\" viewBox=\"0 0 12 10\"><path d=\"M2,3H14V5H2Z\" transform=\"translate(-2 -3)\"/><path d=\"M8,7h6V9H8Z\" transform=\"translate(-2 -3)\"/><path d=\"M2,11H14v2H2Z\" transform=\"translate(-2 -3)\"/></svg>')}fng-text-editor .fng-icon-text-align-right.fng-gray{background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" fill=\"rgb(185, 186, 187)\" viewBox=\"0 0 12 10\"><path d=\"M2,3H14V5H2Z\" transform=\"translate(-2 -3)\"/><path d=\"M8,7h6V9H8Z\" transform=\"translate(-2 -3)\"/><path d=\"M2,11H14v2H2Z\" transform=\"translate(-2 -3)\"/></svg>')}fng-text-editor .ql-tooltip{z-index:var(--fwe-z-index-tooltip)}fng-text-editor .ql-editor{font-family:MetaPro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:16px;padding:0;min-height:72px;overflow-x:hidden}fng-text-editor .ql-editor p::selection,fng-text-editor .ql-editor strong::selection,fng-text-editor .ql-editor em::selection,fng-text-editor .ql-editor u::selection,fng-text-editor .ql-editor ul::selection,fng-text-editor .ql-editor ol::selection,fng-text-editor .ql-editor li::selection,fng-text-editor .ql-editor a::selection{background:var(--fwe-icon-hero-light)}fng-text-editor .ql-container.ql-snow{border:0;background-color:var(--fwe-white)}fng-text-editor .ql-container.ql-snow .ql-tooltip{transform:translate(160px,12px);color:var(--fwe-black);box-shadow:-1px 1px 4px -1px #3333;border:1px solid var(--fwe-gray-200)}fng-text-editor .ql-container.ql-snow .ql-tooltip input{border:1px solid var(--fwe-gray-200)}fng-text-editor .ql-container.ql-snow .ql-tooltip input::selection{background:var(--fwe-icon-hero-light)}fng-text-editor .ql-container.ql-snow a{color:var(--fwe-caerul)}fng-text-editor .ql-toolbar.ql-snow{border:0;padding:4px 0;border-bottom:1px solid var(--fwe-gray-400)}fng-text-editor .ql-toolbar.ql-snow .ql-formats.fng-editor-toolbar-buttons-container{display:flex;align-items:center;flex-wrap:wrap}fng-text-editor .ql-toolbar.ql-snow button{line-height:normal;box-sizing:border-box;display:inline-flex;text-align:center;padding:0 8px;height:32px;min-height:unset;color:var(--fwe-black);background:none;border-radius:4px;cursor:pointer;border:none;width:unset;max-width:24px;justify-content:center;align-items:center;float:unset}@media (hover: hover) and (pointer: fine){fng-text-editor .ql-toolbar.ql-snow button:hover{background-color:var(--fwe-control-dark);color:var(--fwe-black)}}fng-text-editor .ql-toolbar.ql-snow button:active{background-color:var(--fwe-control-darker)}fng-text-editor .ql-toolbar.ql-snow button.ql-active+button{background-color:var(--fwe-control)}fng-text-editor .ql-toolbar.ql-snow button.fng-btn-toolbar-list{padding:0 6px}fng-text-editor .ql-toolbar.ql-snow button.fng-button i{pointer-events:none}fng-text-editor .ql-toolbar.ql-snow button.fng-button div{pointer-events:none}fng-text-editor .ql-toolbar .fng-button-text{min-width:12px;line-height:16px}fng-text-editor label.fwe-input-text.fwe-disabled .ql-toolbar{pointer-events:none}fng-text-editor label.fwe-input-text.fwe-disabled .ql-toolbar button{color:var(--fwe-text-disabled)}\n"], directives: [{ type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: TextEditorComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-text-editor',
-                    templateUrl: './text-editor.component.html',
-                    styleUrls: ['./text-editor.component.scss'],
-                    encapsulation: ViewEncapsulation.None,
-                    providers: [
+            args: [{ selector: 'fng-text-editor', encapsulation: ViewEncapsulation.None, providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => TextEditorComponent),
                             multi: true
                         }
-                    ]
-                }]
+                    ], template: "<label class=\"fwe-input-text\" [class.fwe-disabled]=\"disabled\">\n  <div class=\"fng-editor-toolbar\" [id]=\"'editor-toolbar-' + id\">\n    <span class=\"ql-formats fwe-d-none\">\n      <select class=\"ql-size\" aria-hidden=\"true\">\n        <option value=\"small\"></option>\n        <option selected></option>\n        <option value=\"large\"></option>\n        <option value=\"huge\"></option>\n      </select>\n    </span>\n    <span class=\"ql-formats fng-editor-toolbar-buttons-container fwe-mr-3\">\n      <ng-container *ngIf=\"config?.toolbar?.bold\">\n        <button type=\"button\" #btnBold class=\"ql-bold fwe-d-none action-bold\" aria-hidden=\"true\"></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-button\"\n          [class.fwe-mr-3]=\"config?.toolbar?.underline || config?.toolbar?.italic\"\n          (click)=\"delegate($event, 'bold')\"\n          [disabled]=\"disabled\"\n        >\n          <div class=\"fng-button-text fng-text-bold\">B</div>\n        </button>\n      </ng-container>\n      <ng-container *ngIf=\"config?.toolbar?.italic\">\n        <button type=\"button\" #btnItalic class=\"ql-italic fwe-d-none action-italic\" aria-hidden=\"true\"></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-button\"\n          [class.fwe-mr-3]=\"config?.toolbar?.underline\"\n          (click)=\"delegate($event, 'italic')\"\n          [disabled]=\"disabled\"\n        >\n          <div class=\"fng-button-text fng-text-italic\">I</div>\n        </button>\n      </ng-container>\n      <ng-container *ngIf=\"config?.toolbar?.underline\">\n        <button type=\"button\" #btnUnderline class=\"ql-underline fwe-d-none action-underline\" aria-hidden=\"true\"></button>\n        <button type=\"button\" class=\"fwe-btn fng-button\" (click)=\"delegate($event, 'underline')\" [disabled]=\"disabled\">\n          <div class=\"fng-button-text fng-text-underline\">U</div>\n        </button>\n      </ng-container>\n\n      <div *ngIf=\"!hideDivider('typo')\" class=\"fng-divider-y fwe-mx-4\"></div>\n\n      <ng-container *ngIf=\"config?.toolbar?.alignCenter\">\n        <button type=\"button\" #btnAlignCenter class=\"ql-align fwe-d-none action-align-center\" aria-hidden=\"true\" value=\"center\"></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-btn-toolbar-list fng-button\"\n          [class.fwe-mr-3]=\"config?.toolbar?.alignRight\"\n          (click)=\"delegate($event, 'align-center')\"\n          [disabled]=\"disabled\"\n        >\n          <i class=\"fwe-icon fwe-icon-toolbar-list fng-icon-text-align-center fwe-pr-0\" [class.fng-gray]=\"disabled\"></i>\n        </button>\n      </ng-container>\n\n      <ng-container *ngIf=\"config?.toolbar?.alignRight\">\n        <button type=\"button\" #btnAlignRight class=\"ql-align fwe-d-none action-align-right\" aria-hidden=\"true\" value=\"right\"></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-btn-toolbar-list fng-button\"\n          (click)=\"delegate($event, 'align-right')\"\n          [disabled]=\"disabled\"\n        >\n          <i class=\"fwe-icon fwe-icon-toolbar-list fng-icon-text-align-right fwe-pr-0\" [class.fng-gray]=\"disabled\"></i>\n        </button>\n      </ng-container>\n\n      <div *ngIf=\"!hideDivider('text-align')\" class=\"fng-divider-y fwe-mx-4\"></div>\n\n      <ng-container *ngIf=\"config?.toolbar?.bulletList\">\n        <button type=\"button\" #btnUl class=\"ql-list fwe-d-none action-ul\" aria-hidden=\"true\" value=\"bullet\"></button>\n        <button\n          type=\"button\"\n          class=\"fwe-btn fng-btn-toolbar-list fng-button\"\n          [class.fwe-mr-3]=\"config?.toolbar?.orderedList\"\n          (click)=\"delegate($event, 'ul')\"\n          [disabled]=\"disabled\"\n        >\n          <i class=\"fwe-icon fwe-icon-toolbar-list fwe-icon-list-list-view fwe-pr-0\"></i>\n        </button>\n      </ng-container>\n      <ng-container *ngIf=\"config?.toolbar?.orderedList\">\n        <button type=\"button\" #btnOl class=\"ql-list fwe-d-none action-ol\" aria-hidden=\"true\" value=\"ordered\"></button>\n        <button type=\"button\" class=\"fwe-btn fng-btn-toolbar-list fng-button\" (click)=\"delegate($event, 'ol')\" [disabled]=\"disabled\">\n          <i class=\"fwe-icon fwe-icon-toolbar-list fwe-icon-enumeration fwe-pr-0\"></i>\n        </button>\n      </ng-container>\n\n      <div *ngIf=\"!hideDivider('lists')\" class=\"fng-divider-y fwe-mx-4\"></div>\n\n      <ng-container *ngIf=\"config?.toolbar?.image\">\n        <button type=\"button\" class=\"fwe-btn fng-btn-toolbar-list fng-button\" (click)=\"delegate($event, 'image')\" [disabled]=\"disabled\">\n          <i class=\"fwe-icon fwe-icon-toolbar-list fwe-icon-image-image fwe-pr-0\"></i>\n        </button>\n        <button type=\"button\" #btnImage class=\"ql-image fwe-d-none\" aria-hidden=\"true\"></button>\n      </ng-container>\n\n      <div *ngIf=\"!hideDivider('image')\" class=\"fng-divider-y fwe-mx-4\"></div>\n\n      <ng-container *ngIf=\"config?.toolbar?.link\">\n        <button type=\"button\" class=\"fwe-btn fng-btn-toolbar-list fng-button\" (click)=\"delegate($event, 'link')\" [disabled]=\"disabled\">\n          <i class=\"fwe-icon fwe-icon-toolbar-list fwe-icon-file-link fwe-pr-0\"></i>\n        </button>\n        <button type=\"button\" #btnLink class=\"ql-link fwe-d-none\" aria-hidden=\"true\"></button>\n      </ng-container>\n    </span>\n  </div>\n  <div class=\"fng-editor-container\" [id]=\"'editor-container-' + id\">\n    <div class=\"fng-editor\" [id]=\"'editor-' + id\"></div>\n  </div>\n  <span class=\"fwe-input-text-label\" [id]=\"'editor-label-' + id\">{{ label }}</span>\n  <span *ngIf=\"hint\" class=\"fng-text-editor-info\">{{ hint }}</span>\n  <span *ngIf=\"error\" class=\"fng-text-editor-invalid\">{{ error }}</span>\n  <span *ngIf=\"maxLength > 0 && value != null\" class=\"fwe-input-text-count\">{{ currentLength() }} / {{ maxLength }}</span>\n</label>\n", styles: ["@charset \"UTF-8\";/*!\n * Quill Editor v1.3.7\n * https://quilljs.com/\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container.ql-disabled .ql-editor ul[data-checked]>li:before{pointer-events:none}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor ul,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ul{padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li:before{content:\"\\2022\"}.ql-editor ul[data-checked=true],.ql-editor ul[data-checked=false]{pointer-events:none}.ql-editor ul[data-checked=true]>li *,.ql-editor ul[data-checked=false]>li *{pointer-events:all}.ql-editor ul[data-checked=true]>li:before,.ql-editor ul[data-checked=false]>li:before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li:before{content:\"\\2611\"}.ql-editor ul[data-checked=false]>li:before{content:\"\\2610\"}.ql-editor li:before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl):before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl:before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) \". \"}.ql-editor ol li.ql-indent-1{counter-increment:list-1}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) \". \"}.ql-editor ol li.ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2{counter-increment:list-2}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) \". \"}.ql-editor ol li.ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3{counter-increment:list-3}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) \". \"}.ql-editor ol li.ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4{counter-increment:list-4}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) \". \"}.ql-editor ol li.ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5{counter-increment:list-5}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) \". \"}.ql-editor ol li.ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-6{counter-increment:list-6}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) \". \"}.ql-editor ol li.ql-indent-6{counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-7{counter-increment:list-7}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) \". \"}.ql-editor ol li.ql-indent-7{counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-8{counter-increment:list-8}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) \". \"}.ql-editor ol li.ql-indent-8{counter-reset:list-9}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}/*!\n * Quill Editor v1.3.7\n * https://quilljs.com/\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container.ql-disabled .ql-editor ul[data-checked]>li:before{pointer-events:none}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor ul,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0;counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol,.ql-editor ul{padding-left:1.5em}.ql-editor ol>li,.ql-editor ul>li{list-style-type:none}.ql-editor ul>li:before{content:\"\\2022\"}.ql-editor ul[data-checked=true],.ql-editor ul[data-checked=false]{pointer-events:none}.ql-editor ul[data-checked=true]>li *,.ql-editor ul[data-checked=false]>li *{pointer-events:all}.ql-editor ul[data-checked=true]>li:before,.ql-editor ul[data-checked=false]>li:before{color:#777;cursor:pointer;pointer-events:all}.ql-editor ul[data-checked=true]>li:before{content:\"\\2611\"}.ql-editor ul[data-checked=false]>li:before{content:\"\\2610\"}.ql-editor li:before{display:inline-block;white-space:nowrap;width:1.2em}.ql-editor li:not(.ql-direction-rtl):before{margin-left:-1.5em;margin-right:.3em;text-align:right}.ql-editor li.ql-direction-rtl:before{margin-left:.3em;margin-right:-1.5em}.ql-editor ol li:not(.ql-direction-rtl),.ql-editor ul li:not(.ql-direction-rtl){padding-left:1.5em}.ql-editor ol li.ql-direction-rtl,.ql-editor ul li.ql-direction-rtl{padding-right:1.5em}.ql-editor ol li{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;counter-increment:list-0}.ql-editor ol li:before{content:counter(list-0,decimal) \". \"}.ql-editor ol li.ql-indent-1{counter-increment:list-1}.ql-editor ol li.ql-indent-1:before{content:counter(list-1,lower-alpha) \". \"}.ql-editor ol li.ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-2{counter-increment:list-2}.ql-editor ol li.ql-indent-2:before{content:counter(list-2,lower-roman) \". \"}.ql-editor ol li.ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-3{counter-increment:list-3}.ql-editor ol li.ql-indent-3:before{content:counter(list-3,decimal) \". \"}.ql-editor ol li.ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-4{counter-increment:list-4}.ql-editor ol li.ql-indent-4:before{content:counter(list-4,lower-alpha) \". \"}.ql-editor ol li.ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-5{counter-increment:list-5}.ql-editor ol li.ql-indent-5:before{content:counter(list-5,lower-roman) \". \"}.ql-editor ol li.ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}.ql-editor ol li.ql-indent-6{counter-increment:list-6}.ql-editor ol li.ql-indent-6:before{content:counter(list-6,decimal) \". \"}.ql-editor ol li.ql-indent-6{counter-reset:list-7 list-8 list-9}.ql-editor ol li.ql-indent-7{counter-increment:list-7}.ql-editor ol li.ql-indent-7:before{content:counter(list-7,lower-alpha) \". \"}.ql-editor ol li.ql-indent-7{counter-reset:list-8 list-9}.ql-editor ol li.ql-indent-8{counter-increment:list-8}.ql-editor ol li.ql-indent-8:before{content:counter(list-8,lower-roman) \". \"}.ql-editor ol li.ql-indent-8{counter-reset:list-9}.ql-editor ol li.ql-indent-9{counter-increment:list-9}.ql-editor ol li.ql-indent-9:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer: coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor pre{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor pre{white-space:pre-wrap;margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor pre.ql-syntax{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0px}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0px;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}fng-text-editor .fng-divider-y{display:inline-flex;flex:0 0 1px;height:24px;width:1px;background-color:var(--fwe-gray-400)}fng-text-editor .fng-editor{min-height:100%}fng-text-editor .fng-editor-container{order:2;height:160px;min-height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--fwe-control-scrollbar) var(--fwe-gray-100);margin-top:8px;padding-bottom:4px;border-bottom:var(--fwe-gray-400) solid 1px}fng-text-editor .fng-editor-container::-webkit-scrollbar{width:12px}fng-text-editor .fng-editor-container::-webkit-scrollbar-track{background:transparent}fng-text-editor .fng-editor-container::-webkit-scrollbar-thumb{overflow:visible;background-color:var(--fwe-control-scrollbar);border:3px solid rgba(242,243,245,0);-webkit-background-clip:padding-box;background-clip:padding-box;border-radius:6px}fng-text-editor .fng-editor-container:hover{border-bottom:var(--fwe-hero) solid 1px}fng-text-editor .fng-editor-container[contenteditable=true]{outline:none}fng-text-editor .fng-editor-container[contenteditable=true]:focus{border-bottom:var(--fwe-hero) solid 1px}fng-text-editor label.fwe-input-text{line-height:24px}fng-text-editor label.fwe-input-text .fwe-input-text-count{display:inline-block;line-height:1.5;position:absolute;right:0;bottom:0;z-index:1;color:var(--fwe-text-disabled);font-size:12px}fng-text-editor label.fwe-input-text .fwe-input-text-label{order:-1}fng-text-editor label.fwe-input-text .fng-text-editor-info{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:1.5;position:absolute;left:0;top:unset;bottom:0;z-index:2;color:var(--fwe-text-disabled);font-size:12px}fng-text-editor label.fwe-input-text.fwe-disabled{color:var(--fwe-text-disabled)}fng-text-editor label.fwe-input-text.fwe-disabled .fwe-input-text-label{color:var(--fwe-text-disabled)}fng-text-editor label.fwe-input-text.fwe-disabled .fng-editor-container{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-editor label.fwe-input-text.fwe-disabled .fng-editor-container:hover{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-editor label.fwe-input-text.fwe-disabled .fng-divider-y{background-color:var(--fwe-text-disabled)}fng-text-editor .fng-text-editor-invalid{display:none;line-height:1.5;position:absolute;left:0;bottom:0;z-index:2;color:var(--fwe-red);font-size:12px}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor{box-shadow:none;outline:none}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled{border-bottom:1px solid var(--fwe-control-disabled)!important}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fwe-input-text-label,fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fng-text-editor-invalid,fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fng-text-editor-info{color:var(--fwe-text-disabled)}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fwe-input-text-label:after,fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fng-text-editor-invalid:after,fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor:disabled~.fng-text-editor-info:after{color:var(--fwe-text-disabled)}fng-text-editor.ng-dirty.ng-invalid label.fwe-input-text .fng-editor-container{border-bottom:1px solid var(--fwe-red)}fng-text-editor.ng-dirty.ng-invalid .fng-text-editor-info{display:none!important}fng-text-editor.ng-dirty.ng-invalid .fng-text-editor-invalid{display:block!important}fng-text-editor .fng-text-bold{font-weight:700}fng-text-editor .fng-text-italic{font-style:italic}fng-text-editor .fng-text-underline{text-decoration:underline}fng-text-editor .fng-icon-text-align-center{width:12px;height:10px;background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" fill=\"rgb(51, 51, 51)\" viewBox=\"0 0 12 10\"><path d=\"M2,3H14V5H2Z\" transform=\"translate(-2 -3)\"/><path d=\"M5,7h6V9H5Z\" transform=\"translate(-2 -3)\"/><path d=\"M2,11H14v2H2Z\" transform=\"translate(-2 -3)\"/></svg>')}fng-text-editor .fng-icon-text-align-center.fng-gray{background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" fill=\"rgb(185, 186, 187)\" viewBox=\"0 0 12 10\"><path d=\"M2,3H14V5H2Z\" transform=\"translate(-2 -3)\"/><path d=\"M5,7h6V9H5Z\" transform=\"translate(-2 -3)\"/><path d=\"M2,11H14v2H2Z\" transform=\"translate(-2 -3)\"/></svg>')}fng-text-editor .fng-icon-text-align-right{width:12px;height:10px;background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" fill=\"rgb(51, 51, 51)\" viewBox=\"0 0 12 10\"><path d=\"M2,3H14V5H2Z\" transform=\"translate(-2 -3)\"/><path d=\"M8,7h6V9H8Z\" transform=\"translate(-2 -3)\"/><path d=\"M2,11H14v2H2Z\" transform=\"translate(-2 -3)\"/></svg>')}fng-text-editor .fng-icon-text-align-right.fng-gray{background:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" fill=\"rgb(185, 186, 187)\" viewBox=\"0 0 12 10\"><path d=\"M2,3H14V5H2Z\" transform=\"translate(-2 -3)\"/><path d=\"M8,7h6V9H8Z\" transform=\"translate(-2 -3)\"/><path d=\"M2,11H14v2H2Z\" transform=\"translate(-2 -3)\"/></svg>')}fng-text-editor .ql-tooltip{z-index:var(--fwe-z-index-tooltip)}fng-text-editor .ql-editor{font-family:MetaPro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:16px;padding:0;min-height:72px;overflow-x:hidden}fng-text-editor .ql-editor p::selection,fng-text-editor .ql-editor strong::selection,fng-text-editor .ql-editor em::selection,fng-text-editor .ql-editor u::selection,fng-text-editor .ql-editor ul::selection,fng-text-editor .ql-editor ol::selection,fng-text-editor .ql-editor li::selection,fng-text-editor .ql-editor a::selection{background:var(--fwe-icon-hero-light)}fng-text-editor .ql-container.ql-snow{border:0;background-color:var(--fwe-white)}fng-text-editor .ql-container.ql-snow .ql-tooltip{transform:translate(160px,12px);color:var(--fwe-black);box-shadow:-1px 1px 4px -1px #3333;border:1px solid var(--fwe-gray-200)}fng-text-editor .ql-container.ql-snow .ql-tooltip input{border:1px solid var(--fwe-gray-200)}fng-text-editor .ql-container.ql-snow .ql-tooltip input::selection{background:var(--fwe-icon-hero-light)}fng-text-editor .ql-container.ql-snow a{color:var(--fwe-caerul)}fng-text-editor .ql-toolbar.ql-snow{border:0;padding:4px 0;border-bottom:1px solid var(--fwe-gray-400)}fng-text-editor .ql-toolbar.ql-snow .ql-formats.fng-editor-toolbar-buttons-container{display:flex;align-items:center;flex-wrap:wrap}fng-text-editor .ql-toolbar.ql-snow button{line-height:normal;box-sizing:border-box;display:inline-flex;text-align:center;padding:0 8px;height:32px;min-height:unset;color:var(--fwe-black);background:none;border-radius:4px;cursor:pointer;border:none;width:unset;max-width:24px;justify-content:center;align-items:center;float:unset}@media (hover: hover) and (pointer: fine){fng-text-editor .ql-toolbar.ql-snow button:hover{background-color:var(--fwe-control-dark);color:var(--fwe-black)}}fng-text-editor .ql-toolbar.ql-snow button:active{background-color:var(--fwe-control-darker)}fng-text-editor .ql-toolbar.ql-snow button.ql-active+button{background-color:var(--fwe-control)}fng-text-editor .ql-toolbar.ql-snow button.fng-btn-toolbar-list{padding:0 6px}fng-text-editor .ql-toolbar.ql-snow button.fng-button i{pointer-events:none}fng-text-editor .ql-toolbar.ql-snow button.fng-button div{pointer-events:none}fng-text-editor .ql-toolbar .fng-button-text{min-width:12px;line-height:16px}fng-text-editor label.fwe-input-text.fwe-disabled .ql-toolbar{pointer-events:none}fng-text-editor label.fwe-input-text.fwe-disabled .ql-toolbar button{color:var(--fwe-text-disabled)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$3.DomSanitizer }]; }, propDecorators: { btnBold: [{
                 type: ViewChild,
                 args: ['btnBold']
@@ -4839,9 +4672,9 @@ class ContainerHostDirective {
         }
     }
 }
-ContainerHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ContainerHostDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-ContainerHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.0", type: ContainerHostDirective, host: { listeners: { "document:click": "onHostClick($event.target)" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ContainerHostDirective, decorators: [{
+ContainerHostDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ContainerHostDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+ContainerHostDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: ContainerHostDirective, host: { listeners: { "document:click": "onHostClick($event.target)" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ContainerHostDirective, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { onHostClick: [{
                 type: HostListener,
@@ -4850,8 +4683,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
 
 class FestoAngularFormsModule {
 }
-FestoAngularFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FestoAngularFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularFormsModule, declarations: [CheckboxComponent,
+FestoAngularFormsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularFormsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FestoAngularFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularFormsModule, declarations: [CheckboxComponent,
         SwitchComponent,
         RadioGroupDirective,
         RadioComponent,
@@ -4891,9 +4724,9 @@ FestoAngularFormsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         TimePickerDropdownComponent,
         TextEditorComponent,
         ChipTextPipe] });
-FestoAngularFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularFormsModule, providers: [UniqueSelectionDispatcher], imports: [[ReactiveFormsModule, FormsModule, CommonModule, OverlayModule, ScrollingModule, DragDropModule, ObserversModule], ReactiveFormsModule,
+FestoAngularFormsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularFormsModule, providers: [UniqueSelectionDispatcher], imports: [[ReactiveFormsModule, FormsModule, CommonModule, OverlayModule, ScrollingModule, DragDropModule, ObserversModule], ReactiveFormsModule,
         FormsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularFormsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularFormsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [
@@ -4974,16 +4807,11 @@ class AlertComponent {
         this.cancel.emit();
     }
 }
-AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: AlertComponent, selector: "fng-alert", inputs: { data: "data" }, outputs: { close: "close", cancel: "cancel", ok: "ok" }, host: { listeners: { "window:keyup": "onKeyUp($event)" } }, viewQueries: [{ propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true }], ngImport: i0, template: "<div\n  class=\"fwe-modal\"\n  [ngClass]=\"{\n    'fwe-modal--with-indicator-bar': data?.strong === true,\n    'fwe-modal--warning': data?.alertType === 'warning',\n    'fwe-modal--error': data?.alertType === 'error',\n    'fwe-modal--info': data?.alertType === 'info'\n  }\"\n>\n  <div class=\"fwe-modal-close\">\n    <button type=\"button\" aria-label=\"Close\" #closeBtn class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onClose()\">\n      <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  </div>\n  <div class=\"fwe-modal-header\">\n    <h2 *ngIf=\"data?.subtitle\" class=\"fwe-modal-h2\">\n      <i\n        [ngClass]=\"{\n          'fwe-icon': true,\n          'fwe-icon-status-warning': data?.alertType === 'warning',\n          'fwe-icon-status-failure': data?.alertType === 'error',\n          'fwe-icon-status-check-status': data?.alertType === 'info'\n        }\"\n      ></i\n      >{{ data?.subtitle }}\n    </h2>\n    <h1 class=\"fwe-modal-h1\">\n      <i\n        [ngClass]=\"{\n          'fwe-icon': true,\n          'fwe-icon-status-warning': data?.alertType === 'warning',\n          'fwe-icon-status-failure': data?.alertType === 'error',\n          'fwe-icon-status-check-status': data?.alertType === 'info'\n        }\"\n      ></i\n      >{{ data?.title }}\n    </h1>\n  </div>\n  <div class=\"fwe-modal-body\">\n    <p>{{ data?.body }}</p>\n  </div>\n  <div class=\"fwe-modal-footer\" *ngIf=\"data?.cancel || data?.ok\">\n    <div class=\"fwe-modal-buttons fwe-modal-buttons--full-width\">\n      <button\n        *ngIf=\"data?.cancel\"\n        type=\"button\"\n        aria-label=\"Cancel\"\n        class=\"fwe-btn fwe-btn-lg\"\n        [ngClass]=\"{ 'fwe-btn-link': data?.strong === true && (data?.alertType === 'warning' || data?.alertType === 'error') }\"\n        (click)=\"onCancel()\"\n      >\n        {{ data?.cancel }}\n      </button>\n      <button *ngIf=\"data?.ok\" type=\"button\" aria-label=\"Ok\" class=\"fwe-btn fwe-btn-lg fwe-btn-hero\" (click)=\"onOk()\">\n        {{ data?.ok }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: AlertComponent, decorators: [{
+AlertComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AlertComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: AlertComponent, selector: "fng-alert", inputs: { data: "data" }, outputs: { close: "close", cancel: "cancel", ok: "ok" }, host: { listeners: { "window:keyup": "onKeyUp($event)" } }, viewQueries: [{ propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true }], ngImport: i0, template: "<div\n  class=\"fwe-modal\"\n  [ngClass]=\"{\n    'fwe-modal--with-indicator-bar': data?.strong === true,\n    'fwe-modal--warning': data?.alertType === 'warning',\n    'fwe-modal--error': data?.alertType === 'error',\n    'fwe-modal--info': data?.alertType === 'info'\n  }\"\n>\n  <div class=\"fwe-modal-close\">\n    <button type=\"button\" aria-label=\"Close\" #closeBtn class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onClose()\">\n      <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  </div>\n  <div class=\"fwe-modal-header\">\n    <h2 *ngIf=\"data?.subtitle\" class=\"fwe-modal-h2\">\n      <i\n        [ngClass]=\"{\n          'fwe-icon': true,\n          'fwe-icon-status-warning': data?.alertType === 'warning',\n          'fwe-icon-status-failure': data?.alertType === 'error',\n          'fwe-icon-status-check-status': data?.alertType === 'info'\n        }\"\n      ></i\n      >{{ data?.subtitle }}\n    </h2>\n    <h1 class=\"fwe-modal-h1\">\n      <i\n        [ngClass]=\"{\n          'fwe-icon': true,\n          'fwe-icon-status-warning': data?.alertType === 'warning',\n          'fwe-icon-status-failure': data?.alertType === 'error',\n          'fwe-icon-status-check-status': data?.alertType === 'info'\n        }\"\n      ></i\n      >{{ data?.title }}\n    </h1>\n  </div>\n  <div class=\"fwe-modal-body\">\n    <p>{{ data?.body }}</p>\n  </div>\n  <div class=\"fwe-modal-footer\" *ngIf=\"data?.cancel || data?.ok\">\n    <div class=\"fwe-modal-buttons fwe-modal-buttons--full-width\">\n      <button\n        *ngIf=\"data?.cancel\"\n        type=\"button\"\n        aria-label=\"Cancel\"\n        class=\"fwe-btn fwe-btn-lg\"\n        [ngClass]=\"{ 'fwe-btn-link': data?.strong === true && (data?.alertType === 'warning' || data?.alertType === 'error') }\"\n        (click)=\"onCancel()\"\n      >\n        {{ data?.cancel }}\n      </button>\n      <button *ngIf=\"data?.ok\" type=\"button\" aria-label=\"Ok\" class=\"fwe-btn fwe-btn-lg fwe-btn-hero\" (click)=\"onOk()\">\n        {{ data?.ok }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: AlertComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-alert',
-                    templateUrl: './alert.component.html',
-                    styleUrls: ['./alert.component.scss'],
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-alert', encapsulation: ViewEncapsulation.None, template: "<div\n  class=\"fwe-modal\"\n  [ngClass]=\"{\n    'fwe-modal--with-indicator-bar': data?.strong === true,\n    'fwe-modal--warning': data?.alertType === 'warning',\n    'fwe-modal--error': data?.alertType === 'error',\n    'fwe-modal--info': data?.alertType === 'info'\n  }\"\n>\n  <div class=\"fwe-modal-close\">\n    <button type=\"button\" aria-label=\"Close\" #closeBtn class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onClose()\">\n      <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  </div>\n  <div class=\"fwe-modal-header\">\n    <h2 *ngIf=\"data?.subtitle\" class=\"fwe-modal-h2\">\n      <i\n        [ngClass]=\"{\n          'fwe-icon': true,\n          'fwe-icon-status-warning': data?.alertType === 'warning',\n          'fwe-icon-status-failure': data?.alertType === 'error',\n          'fwe-icon-status-check-status': data?.alertType === 'info'\n        }\"\n      ></i\n      >{{ data?.subtitle }}\n    </h2>\n    <h1 class=\"fwe-modal-h1\">\n      <i\n        [ngClass]=\"{\n          'fwe-icon': true,\n          'fwe-icon-status-warning': data?.alertType === 'warning',\n          'fwe-icon-status-failure': data?.alertType === 'error',\n          'fwe-icon-status-check-status': data?.alertType === 'info'\n        }\"\n      ></i\n      >{{ data?.title }}\n    </h1>\n  </div>\n  <div class=\"fwe-modal-body\">\n    <p>{{ data?.body }}</p>\n  </div>\n  <div class=\"fwe-modal-footer\" *ngIf=\"data?.cancel || data?.ok\">\n    <div class=\"fwe-modal-buttons fwe-modal-buttons--full-width\">\n      <button\n        *ngIf=\"data?.cancel\"\n        type=\"button\"\n        aria-label=\"Cancel\"\n        class=\"fwe-btn fwe-btn-lg\"\n        [ngClass]=\"{ 'fwe-btn-link': data?.strong === true && (data?.alertType === 'warning' || data?.alertType === 'error') }\"\n        (click)=\"onCancel()\"\n      >\n        {{ data?.cancel }}\n      </button>\n      <button *ngIf=\"data?.ok\" type=\"button\" aria-label=\"Ok\" class=\"fwe-btn fwe-btn-lg fwe-btn-hero\" (click)=\"onOk()\">\n        {{ data?.ok }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""] }]
         }], propDecorators: { data: [{
                 type: Input
             }], close: [{
@@ -5040,17 +4868,11 @@ class ConfirmComponent {
         return scrollHeight > clientHeight;
     }
 }
-ConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ConfirmComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: ConfirmComponent, selector: "fng-confirm", inputs: { data: "data" }, outputs: { close: "close", cancel: "cancel", ok: "ok" }, host: { listeners: { "window:keyup": "onKeyUp($event)" } }, viewQueries: [{ propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"fwe-modal\" [ngClass]=\"{ 'fwe-modal--with-scrollable-content': hasScrollableContent }\">\n  <div class=\"fwe-modal-close\">\n    <button type=\"button\" aria-label=\"Close\" #closeBtn class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onClose()\">\n      <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  </div>\n  <div class=\"fwe-modal-header\">\n    <h2 *ngIf=\"data?.subtitle\" class=\"fwe-modal-h2\">{{ data?.subtitle }}</h2>\n    <h1 class=\"fwe-modal-h1\">{{ data?.title }}</h1>\n  </div>\n  <div class=\"fwe-modal-body\" #content>\n    <p>{{ data?.body }}</p>\n  </div>\n  <div class=\"fwe-modal-footer\" *ngIf=\"data?.cancel || data?.ok\">\n    <div class=\"fwe-modal-buttons\" [ngClass]=\"{ 'fwe-modal-buttons--full-width': !hasScrollableContent }\">\n      <button *ngIf=\"data?.cancel\" type=\"button\" aria-label=\"Cancel\" class=\"fwe-btn fwe-btn-lg\" (click)=\"onCancel()\">\n        {{ data?.cancel }}\n      </button>\n      <button *ngIf=\"data?.ok\" type=\"button\" aria-label=\"Ok\" class=\"fwe-btn fwe-btn-lg fwe-btn-hero\" (click)=\"onOk()\">\n        {{ data?.ok }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ConfirmComponent, decorators: [{
+ConfirmComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ConfirmComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ConfirmComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: ConfirmComponent, selector: "fng-confirm", inputs: { data: "data" }, outputs: { close: "close", cancel: "cancel", ok: "ok" }, host: { listeners: { "window:keyup": "onKeyUp($event)" } }, viewQueries: [{ propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true }, { propertyName: "content", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<div class=\"fwe-modal\" [ngClass]=\"{ 'fwe-modal--with-scrollable-content': hasScrollableContent }\">\n  <div class=\"fwe-modal-close\">\n    <button type=\"button\" aria-label=\"Close\" #closeBtn class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onClose()\">\n      <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  </div>\n  <div class=\"fwe-modal-header\">\n    <h2 *ngIf=\"data?.subtitle\" class=\"fwe-modal-h2\">{{ data?.subtitle }}</h2>\n    <h1 class=\"fwe-modal-h1\">{{ data?.title }}</h1>\n  </div>\n  <div class=\"fwe-modal-body\" #content>\n    <p>{{ data?.body }}</p>\n  </div>\n  <div class=\"fwe-modal-footer\" *ngIf=\"data?.cancel || data?.ok\">\n    <div class=\"fwe-modal-buttons\" [ngClass]=\"{ 'fwe-modal-buttons--full-width': !hasScrollableContent }\">\n      <button *ngIf=\"data?.cancel\" type=\"button\" aria-label=\"Cancel\" class=\"fwe-btn fwe-btn-lg\" (click)=\"onCancel()\">\n        {{ data?.cancel }}\n      </button>\n      <button *ngIf=\"data?.ok\" type=\"button\" aria-label=\"Ok\" class=\"fwe-btn fwe-btn-lg fwe-btn-hero\" (click)=\"onOk()\">\n        {{ data?.ok }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ConfirmComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-confirm',
-                    templateUrl: './confirm.component.html',
-                    styleUrls: ['./confirm.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-confirm', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fwe-modal\" [ngClass]=\"{ 'fwe-modal--with-scrollable-content': hasScrollableContent }\">\n  <div class=\"fwe-modal-close\">\n    <button type=\"button\" aria-label=\"Close\" #closeBtn class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onClose()\">\n      <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  </div>\n  <div class=\"fwe-modal-header\">\n    <h2 *ngIf=\"data?.subtitle\" class=\"fwe-modal-h2\">{{ data?.subtitle }}</h2>\n    <h1 class=\"fwe-modal-h1\">{{ data?.title }}</h1>\n  </div>\n  <div class=\"fwe-modal-body\" #content>\n    <p>{{ data?.body }}</p>\n  </div>\n  <div class=\"fwe-modal-footer\" *ngIf=\"data?.cancel || data?.ok\">\n    <div class=\"fwe-modal-buttons\" [ngClass]=\"{ 'fwe-modal-buttons--full-width': !hasScrollableContent }\">\n      <button *ngIf=\"data?.cancel\" type=\"button\" aria-label=\"Cancel\" class=\"fwe-btn fwe-btn-lg\" (click)=\"onCancel()\">\n        {{ data?.cancel }}\n      </button>\n      <button *ngIf=\"data?.ok\" type=\"button\" aria-label=\"Ok\" class=\"fwe-btn fwe-btn-lg fwe-btn-hero\" (click)=\"onOk()\">\n        {{ data?.ok }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { data: [{
                 type: Input
             }], close: [{
@@ -5146,16 +4968,11 @@ class PromptComponent {
         }
     }
 }
-PromptComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PromptComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-PromptComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: PromptComponent, selector: "fng-prompt", inputs: { data: "data" }, outputs: { close: "close", cancel: "cancel", ok: "ok" }, host: { listeners: { "window:keyup": "onKeyUp($event)" } }, viewQueries: [{ propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true }], ngImport: i0, template: "<div class=\"fwe-modal\">\n  <div class=\"fwe-modal-close\">\n    <button type=\"button\" aria-label=\"Close\" #closeBtn class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onClose()\">\n      <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  </div>\n  <div class=\"fwe-modal-header\">\n    <h2 *ngIf=\"data?.subtitle\" class=\"fwe-modal-h2\">{{ data?.subtitle }}</h2>\n    <h1 class=\"fwe-modal-h1\">{{ data?.title }}</h1>\n  </div>\n  <form [formGroup]=\"form\" class=\"fwe-modal-body\">\n    <fng-text-input formControlName=\"text\" [label]=\"data?.label\" [hint]=\"data?.hint\" type=\"text\" [error]=\"error\"></fng-text-input>\n  </form>\n  <div class=\"fwe-modal-footer\" *ngIf=\"data?.cancel || data?.ok\">\n    <div class=\"fwe-modal-buttons\">\n      <button *ngIf=\"data?.cancel\" type=\"button\" aria-label=\"Cancel\" class=\"fwe-btn\" (click)=\"onCancel()\">\n        {{ data?.cancel }}\n      </button>\n      <button *ngIf=\"data?.ok\" type=\"button\" aria-label=\"Ok\" class=\"fwe-btn fwe-btn-hero\" (click)=\"onOk()\">\n        {{ data?.ok }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: TextInputComponent, selector: "fng-text-input", inputs: ["label", "type", "readonly", "step", "min", "max", "tabindex", "placeholder", "name", "disabled", "value", "required", "error", "hint"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: PromptComponent, decorators: [{
+PromptComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PromptComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
+PromptComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: PromptComponent, selector: "fng-prompt", inputs: { data: "data" }, outputs: { close: "close", cancel: "cancel", ok: "ok" }, host: { listeners: { "window:keyup": "onKeyUp($event)" } }, viewQueries: [{ propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true }], ngImport: i0, template: "<div class=\"fwe-modal\">\n  <div class=\"fwe-modal-close\">\n    <button type=\"button\" aria-label=\"Close\" #closeBtn class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onClose()\">\n      <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  </div>\n  <div class=\"fwe-modal-header\">\n    <h2 *ngIf=\"data?.subtitle\" class=\"fwe-modal-h2\">{{ data?.subtitle }}</h2>\n    <h1 class=\"fwe-modal-h1\">{{ data?.title }}</h1>\n  </div>\n  <form [formGroup]=\"form\" class=\"fwe-modal-body\">\n    <fng-text-input formControlName=\"text\" [label]=\"data?.label\" [hint]=\"data?.hint\" type=\"text\" [error]=\"error\"></fng-text-input>\n  </form>\n  <div class=\"fwe-modal-footer\" *ngIf=\"data?.cancel || data?.ok\">\n    <div class=\"fwe-modal-buttons\">\n      <button *ngIf=\"data?.cancel\" type=\"button\" aria-label=\"Cancel\" class=\"fwe-btn\" (click)=\"onCancel()\">\n        {{ data?.cancel }}\n      </button>\n      <button *ngIf=\"data?.ok\" type=\"button\" aria-label=\"Ok\" class=\"fwe-btn fwe-btn-hero\" (click)=\"onOk()\">\n        {{ data?.ok }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: TextInputComponent, selector: "fng-text-input", inputs: ["label", "type", "readonly", "step", "min", "max", "tabindex", "placeholder", "name", "disabled", "value", "required", "error", "hint"] }], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: PromptComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-prompt',
-                    templateUrl: './prompt.component.html',
-                    styleUrls: ['./prompt.component.scss'],
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-prompt', encapsulation: ViewEncapsulation.None, template: "<div class=\"fwe-modal\">\n  <div class=\"fwe-modal-close\">\n    <button type=\"button\" aria-label=\"Close\" #closeBtn class=\"fwe-btn fwe-btn-link fwe-dark\" (click)=\"onClose()\">\n      <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n      <span class=\"fwe-sr-only\">Close</span>\n    </button>\n  </div>\n  <div class=\"fwe-modal-header\">\n    <h2 *ngIf=\"data?.subtitle\" class=\"fwe-modal-h2\">{{ data?.subtitle }}</h2>\n    <h1 class=\"fwe-modal-h1\">{{ data?.title }}</h1>\n  </div>\n  <form [formGroup]=\"form\" class=\"fwe-modal-body\">\n    <fng-text-input formControlName=\"text\" [label]=\"data?.label\" [hint]=\"data?.hint\" type=\"text\" [error]=\"error\"></fng-text-input>\n  </form>\n  <div class=\"fwe-modal-footer\" *ngIf=\"data?.cancel || data?.ok\">\n    <div class=\"fwe-modal-buttons\">\n      <button *ngIf=\"data?.cancel\" type=\"button\" aria-label=\"Cancel\" class=\"fwe-btn\" (click)=\"onCancel()\">\n        {{ data?.cancel }}\n      </button>\n      <button *ngIf=\"data?.ok\" type=\"button\" aria-label=\"Ok\" class=\"fwe-btn fwe-btn-hero\" (click)=\"onOk()\">\n        {{ data?.ok }}\n      </button>\n    </div>\n  </div>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1$2.FormBuilder }]; }, propDecorators: { data: [{
                 type: Input
             }], close: [{
@@ -5174,10 +4991,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
 
 class FestoAngularModalsModule {
 }
-FestoAngularModalsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularModalsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FestoAngularModalsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularModalsModule, declarations: [AlertComponent, ConfirmComponent, PromptComponent], imports: [CommonModule, RouterModule, OverlayModule, FestoAngularFormsModule], exports: [AlertComponent, ConfirmComponent, PromptComponent] });
-FestoAngularModalsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularModalsModule, providers: [], imports: [[CommonModule, RouterModule, OverlayModule, FestoAngularFormsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularModalsModule, decorators: [{
+FestoAngularModalsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularModalsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FestoAngularModalsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularModalsModule, declarations: [AlertComponent, ConfirmComponent, PromptComponent], imports: [CommonModule, RouterModule, OverlayModule, FestoAngularFormsModule], exports: [AlertComponent, ConfirmComponent, PromptComponent] });
+FestoAngularModalsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularModalsModule, providers: [], imports: [[CommonModule, RouterModule, OverlayModule, FestoAngularFormsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularModalsModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [AlertComponent, ConfirmComponent, PromptComponent],
@@ -5211,8 +5028,8 @@ class SnackbarComponent {
         this.close.emit();
     }
 }
-SnackbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: SnackbarComponent, selector: "fng-snackbar", inputs: { data: "data" }, outputs: { close: "close", action: "action" }, host: { properties: { "style.display": "this.blockDisplay", "@appearDisappear": "this.animationState" } }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'fwe-snackbar': true,\n    'fwe-snackbar-b': data?.variant === 'b',\n    'fwe-snackbar-c': data?.variant === 'c',\n    'fwe-snackbar-warning': data?.type === 'warning',\n    'fwe-snackbar-error': data?.type === 'error',\n    'fwe-snackbar-shadow': data?.darkBackground\n  }\"\n>\n  <i\n    *ngIf=\"data?.type\"\n    aria-hidden=\"true\"\n    [ngClass]=\"{\n      'fwe-icon': true,\n      'fwe-icon-status-info': data?.type === 'info',\n      'fwe-icon-status-warning': data?.type === 'warning',\n      'fwe-icon-status-failure': data?.type === 'error'\n    }\"\n  ></i>\n  <span>{{ data?.text }}</span>\n  <button *ngIf=\"data?.action\" aria-label=\"UserAction\" type=\"button\" class=\"fwe-btn fwe-btn-link\" (click)=\"onAction()\">\n    {{ data?.action }}\n  </button>\n  <button *ngIf=\"data?.showClose\" aria-label=\"Close\" type=\"button\" class=\"fwe-btn fwe-btn-link\" (click)=\"onClose()\">\n    <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n    <span class=\"fwe-sr-only\">Close</span>\n  </button>\n</div>\n", styles: [".fwe-snackbar{pointer-events:all}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
+SnackbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SnackbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: SnackbarComponent, selector: "fng-snackbar", inputs: { data: "data" }, outputs: { close: "close", action: "action" }, host: { properties: { "style.display": "this.blockDisplay", "@appearDisappear": "this.animationState" } }, ngImport: i0, template: "<div\n  [ngClass]=\"{\n    'fwe-snackbar': true,\n    'fwe-snackbar-b': data?.variant === 'b',\n    'fwe-snackbar-c': data?.variant === 'c',\n    'fwe-snackbar-warning': data?.type === 'warning',\n    'fwe-snackbar-error': data?.type === 'error',\n    'fwe-snackbar-shadow': data?.darkBackground\n  }\"\n>\n  <i\n    *ngIf=\"data?.type\"\n    aria-hidden=\"true\"\n    [ngClass]=\"{\n      'fwe-icon': true,\n      'fwe-icon-status-info': data?.type === 'info',\n      'fwe-icon-status-warning': data?.type === 'warning',\n      'fwe-icon-status-failure': data?.type === 'error'\n    }\"\n  ></i>\n  <span>{{ data?.text }}</span>\n  <button *ngIf=\"data?.action\" aria-label=\"UserAction\" type=\"button\" class=\"fwe-btn fwe-btn-link\" (click)=\"onAction()\">\n    {{ data?.action }}\n  </button>\n  <button *ngIf=\"data?.showClose\" aria-label=\"Close\" type=\"button\" class=\"fwe-btn fwe-btn-link\" (click)=\"onClose()\">\n    <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n    <span class=\"fwe-sr-only\">Close</span>\n  </button>\n</div>\n", styles: [".fwe-snackbar{pointer-events:all}\n"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
         trigger('appearDisappear', [
             state('init', style({ opacity: 0 })),
             state('first', style({
@@ -5229,14 +5046,9 @@ SnackbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             ]))
         ])
     ], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SnackbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SnackbarComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-snackbar',
-                    templateUrl: './snackbar.component.html',
-                    styleUrls: ['./snackbar.component.scss'],
-                    encapsulation: ViewEncapsulation.None,
-                    animations: [
+            args: [{ selector: 'fng-snackbar', encapsulation: ViewEncapsulation.None, animations: [
                         trigger('appearDisappear', [
                             state('init', style({ opacity: 0 })),
                             state('first', style({
@@ -5252,8 +5064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
                                 animate('0.3s ease-out', style({ height: '0px', 'margin-bottom': '0px' }))
                             ]))
                         ])
-                    ]
-                }]
+                    ], template: "<div\n  [ngClass]=\"{\n    'fwe-snackbar': true,\n    'fwe-snackbar-b': data?.variant === 'b',\n    'fwe-snackbar-c': data?.variant === 'c',\n    'fwe-snackbar-warning': data?.type === 'warning',\n    'fwe-snackbar-error': data?.type === 'error',\n    'fwe-snackbar-shadow': data?.darkBackground\n  }\"\n>\n  <i\n    *ngIf=\"data?.type\"\n    aria-hidden=\"true\"\n    [ngClass]=\"{\n      'fwe-icon': true,\n      'fwe-icon-status-info': data?.type === 'info',\n      'fwe-icon-status-warning': data?.type === 'warning',\n      'fwe-icon-status-failure': data?.type === 'error'\n    }\"\n  ></i>\n  <span>{{ data?.text }}</span>\n  <button *ngIf=\"data?.action\" aria-label=\"UserAction\" type=\"button\" class=\"fwe-btn fwe-btn-link\" (click)=\"onAction()\">\n    {{ data?.action }}\n  </button>\n  <button *ngIf=\"data?.showClose\" aria-label=\"Close\" type=\"button\" class=\"fwe-btn fwe-btn-link\" (click)=\"onClose()\">\n    <i aria-hidden=\"true\" class=\"fwe-icon fwe-icon-close-small\"></i>\n    <span class=\"fwe-sr-only\">Close</span>\n  </button>\n</div>\n", styles: [".fwe-snackbar{pointer-events:all}\n"] }]
         }], propDecorators: { data: [{
                 type: Input
             }], close: [{
@@ -5279,9 +5090,9 @@ class SnackbarService {
         });
     }
 }
-SnackbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-SnackbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SnackbarService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SnackbarService, decorators: [{
+SnackbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+SnackbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SnackbarService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SnackbarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -5353,9 +5164,9 @@ class SnackbarContainerDirective {
         }
     }
 }
-SnackbarContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SnackbarContainerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: SnackbarService }], target: i0.ɵɵFactoryTarget.Directive });
-SnackbarContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.0", type: SnackbarContainerDirective, selector: "[fngSnackbarContainer]", inputs: { fngSnackbarContainer: "fngSnackbarContainer" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SnackbarContainerDirective, decorators: [{
+SnackbarContainerDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SnackbarContainerDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: SnackbarService }], target: i0.ɵɵFactoryTarget.Directive });
+SnackbarContainerDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.1.1", type: SnackbarContainerDirective, selector: "[fngSnackbarContainer]", inputs: { fngSnackbarContainer: "fngSnackbarContainer" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SnackbarContainerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[fngSnackbarContainer]'
@@ -5373,26 +5184,21 @@ class SnackbarContainerComponent {
         };
     }
 }
-SnackbarContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SnackbarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SnackbarContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: SnackbarContainerComponent, selector: "fng-snackbar-container", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"fwe-snackbar-container\">\n  <div [fngSnackbarContainer]=\"config\"></div>\n</div>\n", styles: [".fwe-snackbar-container{pointer-events:none}\n"], directives: [{ type: SnackbarContainerDirective, selector: "[fngSnackbarContainer]", inputs: ["fngSnackbarContainer"] }], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: SnackbarContainerComponent, decorators: [{
+SnackbarContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SnackbarContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SnackbarContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: SnackbarContainerComponent, selector: "fng-snackbar-container", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"fwe-snackbar-container\">\n  <div [fngSnackbarContainer]=\"config\"></div>\n</div>\n", styles: [".fwe-snackbar-container{pointer-events:none}\n"], directives: [{ type: SnackbarContainerDirective, selector: "[fngSnackbarContainer]", inputs: ["fngSnackbarContainer"] }], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: SnackbarContainerComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-snackbar-container',
-                    templateUrl: './snackbar-container.component.html',
-                    styleUrls: ['./snackbar-container.component.scss'],
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-snackbar-container', encapsulation: ViewEncapsulation.None, template: "<div class=\"fwe-snackbar-container\">\n  <div [fngSnackbarContainer]=\"config\"></div>\n</div>\n", styles: [".fwe-snackbar-container{pointer-events:none}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }] } });
 
 class FestoAngularSnackbarModule {
 }
-FestoAngularSnackbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularSnackbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FestoAngularSnackbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularSnackbarModule, bootstrap: [SnackbarComponent], declarations: [SnackbarComponent, SnackbarContainerDirective, SnackbarContainerComponent], imports: [CommonModule], exports: [SnackbarContainerComponent, SnackbarContainerDirective, SnackbarContainerComponent] });
-FestoAngularSnackbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularSnackbarModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularSnackbarModule, decorators: [{
+FestoAngularSnackbarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularSnackbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FestoAngularSnackbarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularSnackbarModule, bootstrap: [SnackbarComponent], declarations: [SnackbarComponent, SnackbarContainerDirective, SnackbarContainerComponent], imports: [CommonModule], exports: [SnackbarContainerComponent, SnackbarContainerDirective, SnackbarContainerComponent] });
+FestoAngularSnackbarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularSnackbarModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularSnackbarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SnackbarComponent, SnackbarContainerDirective, SnackbarContainerComponent],
@@ -5408,59 +5214,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
  */
 class IconComponent {
 }
-IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.0", type: IconComponent, selector: "fng-icon", inputs: { icon: "icon" }, ngImport: i0, template: "<i *ngIf=\"icon?.type === 'font'\" [class]=\"'fwe-icon fwe-icon-' + icon?.name + ' ' + (icon.class || '')\"></i>\n<img *ngIf=\"icon?.type === 'img'\" [class]=\"icon.class\"\n      [src]=\"icon?.url\"\n      [ngStyle]=\"{'width': icon?.width + 'px', 'height': icon?.height + 'px'}\">\n<ng-content *ngIf=\"icon?.type === 'svg'\"></ng-content>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: IconComponent, decorators: [{
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.1", type: IconComponent, selector: "fng-icon", inputs: { icon: "icon" }, ngImport: i0, template: "<i *ngIf=\"icon?.type === 'font'\" [class]=\"'fwe-icon fwe-icon-' + icon?.name + ' ' + (icon.class || '')\"></i>\n<img\n  *ngIf=\"icon?.type === 'img'\"\n  [class]=\"icon.class\"\n  [src]=\"icon?.url\"\n  [ngStyle]=\"{ width: icon?.width + 'px', height: icon?.height + 'px' }\"\n/>\n<ng-content *ngIf=\"icon?.type === 'svg'\"></ng-content>\n", styles: [""], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'fng-icon',
-                    templateUrl: './icon.component.html',
-                    styleUrls: ['./icon.component.scss'],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
-                }]
+            args: [{ selector: 'fng-icon', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<i *ngIf=\"icon?.type === 'font'\" [class]=\"'fwe-icon fwe-icon-' + icon?.name + ' ' + (icon.class || '')\"></i>\n<img\n  *ngIf=\"icon?.type === 'img'\"\n  [class]=\"icon.class\"\n  [src]=\"icon?.url\"\n  [ngStyle]=\"{ width: icon?.width + 'px', height: icon?.height + 'px' }\"\n/>\n<ng-content *ngIf=\"icon?.type === 'svg'\"></ng-content>\n", styles: [""] }]
         }], propDecorators: { icon: [{
                 type: Input
             }] } });
 
 class FestoAngularContentModule {
 }
-FestoAngularContentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FestoAngularContentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularContentModule, declarations: [IconComponent], imports: [CommonModule], exports: [IconComponent] });
-FestoAngularContentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularContentModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularContentModule, decorators: [{
+FestoAngularContentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FestoAngularContentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularContentModule, declarations: [IconComponent], imports: [CommonModule], exports: [IconComponent] });
+FestoAngularContentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularContentModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularContentModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        IconComponent
-                    ],
+                    declarations: [IconComponent],
                     imports: [CommonModule],
-                    exports: [
-                        IconComponent
-                    ],
-                    providers: [],
+                    exports: [IconComponent],
+                    providers: []
                 }]
         }] });
 
 class FestoAngularLayoutModule {
 }
-FestoAngularLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FestoAngularLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularLayoutModule, imports: [CommonModule] });
-FestoAngularLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularLayoutModule, providers: [], imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularLayoutModule, decorators: [{
+FestoAngularLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FestoAngularLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularLayoutModule, imports: [CommonModule] });
+FestoAngularLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularLayoutModule, providers: [], imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
                     imports: [CommonModule],
                     exports: [],
-                    providers: [],
+                    providers: []
                 }]
         }] });
 
 class FestoAngularModule {
 }
-FestoAngularModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FestoAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularModule, imports: [FestoAngularLayoutModule,
+FestoAngularModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FestoAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularModule, imports: [FestoAngularLayoutModule,
         FestoAngularComponentsModule,
         FestoAngularContentModule,
         FestoAngularFormsModule,
@@ -5471,7 +5267,7 @@ FestoAngularModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", vers
         FestoAngularFormsModule,
         FestoAngularModalsModule,
         FestoAngularSnackbarModule] });
-FestoAngularModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularModule, imports: [[
+FestoAngularModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularModule, imports: [[
             FestoAngularLayoutModule,
             FestoAngularComponentsModule,
             FestoAngularContentModule,
@@ -5484,7 +5280,7 @@ FestoAngularModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", vers
         FestoAngularFormsModule,
         FestoAngularModalsModule,
         FestoAngularSnackbarModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: FestoAngularModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: FestoAngularModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -5571,7 +5367,7 @@ class ModalService {
     }
     dispose(overlayRef, complete) {
         return new Promise(resolve => {
-            complete.next();
+            complete.next(true);
             complete.complete();
             complete.unsubscribe();
             overlayRef.dispose();
@@ -5579,9 +5375,9 @@ class ModalService {
         });
     }
 }
-ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ModalService, deps: [{ token: i1$1.Overlay }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
-ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ModalService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImport: i0, type: ModalService, decorators: [{
+ModalService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ModalService, deps: [{ token: i1$1.Overlay }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Injectable });
+ModalService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ModalService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.1", ngImport: i0, type: ModalService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i1$1.Overlay }, { type: i2.Router }]; } });
@@ -5593,4 +5389,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.0", ngImpor
  */
 
 export { AlertComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ChipComponent, ChipContainerComponent, ChipTextPipe, ChipType, ClickOutsideDirective, ColorIndicatorComponent, ColorPickerComponent, ConfirmComponent, ContainerHostDirective as ContainerHost, DatePickerComponent, DateRangePickerComponent, FestoAngularComponentsModule, FestoAngularContentModule, FestoAngularFormsModule, FestoAngularLayoutModule, FestoAngularModalsModule, FestoAngularModule, FestoAngularSnackbarModule, IconComponent, LegendComponent, LegendDirective, LinkButtonComponent, LoadingIndicatorComponent, ModalService, PREDEFINED_COLORS, PaginationComponent, PaginationType, PopoverComponent, PopoverContentComponent, PopoverContentDirective, PopoverContentTypes, PopoverMenuComponent, PopoverPosition, PopoverTypes, ProgressComponent, PromptComponent, RadioChange, RadioComponent, RadioGroupDirective, ScrollableDirective, SearchInputComponent, SegmentComponent, SegmentControlComponent, SelectComponent, SelectOptionComponent, SliderComponent, SnackbarComponent, SnackbarContainerComponent, SnackbarContainerDirective, SnackbarService, StepperComponent, SwitchComponent, TabPaneComponent, TableHeaderCellDirective, TabsComponent, TextAreaComponent, TextEditorComponent, TextInputComponent, TimePickerComponent, TimePickerDropdownComponent, TooltipDirective, ValueAccessorBaseDirective as ValueAccessorBase };
-//# sourceMappingURL=festo-ui-angular.js.map
+//# sourceMappingURL=festo-ui-angular.mjs.map