@igo2/common 1.13.0-alpha.1 → 1.13.1

package/fesm2015/igo2-common.mjs

@@ -30,7 +30,7 @@ import * as i3$1 from '@angular/material/core';
 import * as i5 from '@angular/material/table';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import * as i1$4 from '@angular/forms';
-import { FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { UntypedFormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import moment from 'moment';
 import * as i2$1 from '@angular/cdk/a11y';
 import * as i6 from '@angular/material/autocomplete';
@@ -41,7 +41,7 @@ import * as i2 from '@angular/material/paginator';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import * as i5$1 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i16 from '@angular/material/datepicker';
+import * as i17 from '@angular/material/datepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import * as i1$2 from '@angular/platform-browser';
@@ -1782,7 +1782,7 @@ EntitySelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ent
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntitySelectorComponent, [{
             type: Component,
-            args: [{ selector: 'igo-entity-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field class=\"igo-entity-selector\">\r\n  <mat-select\r\n    [disabled]=\"disabled\"\r\n    [value]=\"selected$ | async\"\r\n    [multiple]=\"multi\"\r\n    [placeholder]=\"placeholder\"\r\n    (selectionChange)=\"onSelectionChange($event)\">\r\n    <mat-option *ngIf=\"emptyText !== undefined && multi === false\" [value]=\"emptyValue\">{{emptyText}}</mat-option>\r\n    <mat-option *ngIf=\"multi === true\" [value]=\"multiSelectValue\">{{multiText$ | async}}</mat-option>\r\n    <ng-template ngFor let-record [ngForOf]=\"store.stateView.all$() | async\">\r\n      <mat-option [value]=\"record.entity\">\r\n        {{titleAccessor(record.entity)}}\r\n      </mat-option>\r\n    </ng-template>\r\n  </mat-select>\r\n</mat-form-field>\r\n", styles: ["mat-form-field{width:100%}\n"] }]
+            args: [{ selector: 'igo-entity-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field class=\"igo-entity-selector\">\n  <mat-select\n    [disabled]=\"disabled\"\n    [value]=\"selected$ | async\"\n    [multiple]=\"multi\"\n    [placeholder]=\"placeholder\"\n    (selectionChange)=\"onSelectionChange($event)\">\n    <mat-option *ngIf=\"emptyText !== undefined && multi === false\" [value]=\"emptyValue\">{{emptyText}}</mat-option>\n    <mat-option *ngIf=\"multi === true\" [value]=\"multiSelectValue\">{{multiText$ | async}}</mat-option>\n    <ng-template ngFor let-record [ngForOf]=\"store.stateView.all$() | async\">\n      <mat-option [value]=\"record.entity\">\n        {{titleAccessor(record.entity)}}\n      </mat-option>\n    </ng-template>\n  </mat-select>\n</mat-form-field>\n", styles: ["mat-form-field{width:100%}\n"] }]
         }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { store: [{
                 type: Input
             }], titleAccessor: [{
@@ -1945,7 +1945,7 @@ EntityTablePaginatorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityTablePaginatorComponent, [{
             type: Component,
-            args: [{ selector: 'igo-entity-table-paginator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-paginator \r\n  [disabled]=\"disabled\"\r\n  [hidePageSize]=\"hidePageSize\"\r\n  [length]=\"length\"\r\n  [pageIndex]=\"pageIndex\"\r\n  [pageSize]=\"pageSize\"\r\n  [pageSizeOptions]=\"pageSizeOptions\"\r\n  [showFirstLastButtons]=\"showFirstLastButtons\"\r\n  (page)=\"emitPaginator()\">\r\n</mat-paginator>\r\n", styles: [":host{margin-top:-10px;padding-right:15px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host{margin-top:0;padding-right:5px}}\n"] }]
+            args: [{ selector: 'igo-entity-table-paginator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-paginator \n  [disabled]=\"disabled\"\n  [hidePageSize]=\"hidePageSize\"\n  [length]=\"length\"\n  [pageIndex]=\"pageIndex\"\n  [pageSize]=\"pageSize\"\n  [pageSizeOptions]=\"pageSizeOptions\"\n  [showFirstLastButtons]=\"showFirstLastButtons\"\n  (page)=\"emitPaginator()\">\n</mat-paginator>\n", styles: [":host{margin-top:-10px;padding-right:15px}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){:host{margin-top:0;padding-right:5px}}\n"] }]
         }], function () { return [{ type: i1$1.LanguageService }, { type: i1$1.MediaService }]; }, { entitySortChange$: [{
                 type: Input
             }], store: [{
@@ -1962,6 +1962,43 @@ EntityTablePaginatorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
             }] });
 })();
 
+class ImageErrorDirective {
+    constructor(el) {
+        this.el = el;
+        this.errorImageUrl = '/assets/igo2/common/images/na.png';
+        this.hideError = false;
+    }
+    onError(event) {
+        if (this.hideError) {
+            this.el.nativeElement.style.display = "none";
+        }
+        else {
+            event.target.src = this.errorImageUrl;
+        }
+    }
+}
+ImageErrorDirective.ɵfac = function ImageErrorDirective_Factory(t) { return new (t || ImageErrorDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
+ImageErrorDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ImageErrorDirective, selectors: [["", "igoImageError", ""]], hostBindings: function ImageErrorDirective_HostBindings(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵlistener("error", function ImageErrorDirective_error_HostBindingHandler($event) { return ctx.onError($event); });
+        }
+    }, inputs: { errorImageUrl: "errorImageUrl", hideError: "hideError" } });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ImageErrorDirective, [{
+            type: Directive,
+            args: [{
+                    selector: '[igoImageError]'
+                }]
+        }], function () { return [{ type: i0.ElementRef }]; }, { errorImageUrl: [{
+                type: Input
+            }], hideError: [{
+                type: Input
+            }], onError: [{
+                type: HostListener,
+                args: ["error", ['$event']]
+            }] });
+})();
+
 /**
  * Directive that handles an entity table row click and selection.
  */
@@ -2125,7 +2162,8 @@ class SecureImagePipe {
         var _a;
         const headers = new HttpHeaders({
             'Content-Type': 'text/plain',
-            activityInterceptor: 'false'
+            activityInterceptor: 'false',
+            interceptError: 'false'
         });
         const regexDepot = new RegExp(((_a = this.configService) === null || _a === void 0 ? void 0 : _a.getConfig('depot.url')) + '.*?(?="|$)');
         if (regexDepot.test(url)) {
@@ -2136,7 +2174,11 @@ class SecureImagePipe {
             headers,
             responseType: 'blob'
         })
-            .pipe(switchMap((blob) => {
+            .pipe(catchError((err) => {
+            err.error.caught = true;
+            err.error.toDisplay = false;
+            throw err;
+        }), switchMap((blob) => {
             return new Observable((observer) => {
                 const reader = new FileReader();
                 reader.readAsDataURL(blob);
@@ -2550,6 +2592,7 @@ function EntityTableComponent_ng_container_5_ng_container_3_ng_container_3_ng_co
         const ctx_r73 = i0.ɵɵnextContext();
         i0.ɵɵpropertyInterpolate("required", ctx_r73.getValidationAttributeValue(column_r16, "mandatory"));
         i0.ɵɵpropertyInterpolate("value", ctx_r73.getValue(record_r63, column_r16));
+        i0.ɵɵpropertyInterpolate("readonly", ctx_r73.getValidationAttributeValue(column_r16, "readonly"));
         i0.ɵɵproperty("formControlName", column_r16.name)("matAutocomplete", _r74);
     }
 }
@@ -2576,9 +2619,9 @@ function EntityTableComponent_ng_container_5_ng_container_3_ng_container_3_ng_co
         i0.ɵɵtemplate(4, EntityTableComponent_ng_container_5_ng_container_3_ng_container_3_ng_container_1_td_1_input_4_Template, 1, 4, "input", 36);
         i0.ɵɵtemplate(5, EntityTableComponent_ng_container_5_ng_container_3_ng_container_3_ng_container_1_td_1_mat_checkbox_5_Template, 1, 2, "mat-checkbox", 37);
         i0.ɵɵtemplate(6, EntityTableComponent_ng_container_5_ng_container_3_ng_container_3_ng_container_1_td_1_mat_select_6_Template, 2, 5, "mat-select", 38);
-        i0.ɵɵtemplate(7, EntityTableComponent_ng_container_5_ng_container_3_ng_container_3_ng_container_1_td_1_input_7_Template, 1, 4, "input", 39);
+        i0.ɵɵtemplate(7, EntityTableComponent_ng_container_5_ng_container_3_ng_container_3_ng_container_1_td_1_input_7_Template, 1, 5, "input", 39);
         i0.ɵɵelementStart(8, "mat-autocomplete", 40, 41);
-        i0.ɵɵlistener("optionSelected", function EntityTableComponent_ng_container_5_ng_container_3_ng_container_3_ng_container_1_td_1_Template_mat_autocomplete_optionSelected_8_listener($event) { i0.ɵɵrestoreView(_r122); const record_r63 = i0.ɵɵnextContext().$implicit; const column_r16 = i0.ɵɵnextContext(3).$implicit; const ctx_r120 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r120.onAutocompleteValueChange(column_r16.name, record_r63, $event)); });
+        i0.ɵɵlistener("optionSelected", function EntityTableComponent_ng_container_5_ng_container_3_ng_container_3_ng_container_1_td_1_Template_mat_autocomplete_optionSelected_8_listener($event) { i0.ɵɵrestoreView(_r122); const record_r63 = i0.ɵɵnextContext().$implicit; const column_r16 = i0.ɵɵnextContext(3).$implicit; const ctx_r120 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r120.onAutocompleteValueChange(column_r16, record_r63, $event)); });
         i0.ɵɵtemplate(10, EntityTableComponent_ng_container_5_ng_container_3_ng_container_3_ng_container_1_td_1_mat_option_10_Template, 2, 2, "mat-option", 42);
         i0.ɵɵpipe(11, "async");
         i0.ɵɵelementEnd()();
@@ -2603,7 +2646,7 @@ function EntityTableComponent_ng_container_5_ng_container_3_ng_container_3_ng_co
         i0.ɵɵadvance(1);
         i0.ɵɵproperty("ngIf", column_r16.type === "autocomplete");
         i0.ɵɵadvance(3);
-        i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(11, 10, ctx_r64.filteredOptions));
+        i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(11, 10, ctx_r64.filteredOptions[column_r16.name]));
     }
 }
 function EntityTableComponent_ng_container_5_ng_container_3_ng_container_3_ng_container_1_ng_template_2_td_0_Template(rf, ctx) {
@@ -2698,12 +2741,37 @@ function EntityTableComponent_ng_container_5_ng_container_3_ng_container_3_Templ
         i0.ɵɵelementContainerEnd();
     }
 }
+function EntityTableComponent_ng_container_5_ng_container_3_ng_container_4_td_1_mat_icon_1_Template(rf, ctx) {
+    if (rf & 1) {
+        const _r147 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "mat-icon", 60);
+        i0.ɵɵlistener("click", function EntityTableComponent_ng_container_5_ng_container_3_ng_container_4_td_1_mat_icon_1_Template_mat_icon_click_0_listener($event) { i0.ɵɵrestoreView(_r147); const column_r16 = i0.ɵɵnextContext(4).$implicit; return i0.ɵɵresetView(column_r16.onClick($event)); });
+        i0.ɵɵelementEnd();
+    }
+    if (rf & 2) {
+        const record_r142 = i0.ɵɵnextContext().$implicit;
+        const column_r16 = i0.ɵɵnextContext(3).$implicit;
+        const ctx_r143 = i0.ɵɵnextContext();
+        i0.ɵɵpropertyInterpolate("svgIcon", ctx_r143.getValue(record_r142, column_r16) || column_r16.icon);
+    }
+}
+function EntityTableComponent_ng_container_5_ng_container_3_ng_container_4_td_1_mat_icon_2_Template(rf, ctx) {
+    if (rf & 1) {
+        i0.ɵɵelement(0, "mat-icon", 61);
+    }
+    if (rf & 2) {
+        const record_r142 = i0.ɵɵnextContext().$implicit;
+        const column_r16 = i0.ɵɵnextContext(3).$implicit;
+        const ctx_r144 = i0.ɵɵnextContext();
+        i0.ɵɵpropertyInterpolate("svgIcon", ctx_r144.getValue(record_r142, column_r16) || column_r16.icon);
+    }
+}
 function EntityTableComponent_ng_container_5_ng_container_3_ng_container_4_td_1_Template(rf, ctx) {
     if (rf & 1) {
-        const _r145 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "td", 22)(1, "mat-icon", 58);
-        i0.ɵɵlistener("click", function EntityTableComponent_ng_container_5_ng_container_3_ng_container_4_td_1_Template_mat_icon_click_1_listener($event) { i0.ɵɵrestoreView(_r145); const column_r16 = i0.ɵɵnextContext(3).$implicit; return i0.ɵɵresetView(column_r16.onClick($event)); });
-        i0.ɵɵelementEnd()();
+        i0.ɵɵelementStart(0, "td", 22);
+        i0.ɵɵtemplate(1, EntityTableComponent_ng_container_5_ng_container_3_ng_container_4_td_1_mat_icon_1_Template, 1, 1, "mat-icon", 58);
+        i0.ɵɵtemplate(2, EntityTableComponent_ng_container_5_ng_container_3_ng_container_4_td_1_mat_icon_2_Template, 1, 1, "mat-icon", 59);
+        i0.ɵɵelementEnd();
     }
     if (rf & 2) {
         const record_r142 = ctx.$implicit;
@@ -2711,59 +2779,61 @@ function EntityTableComponent_ng_container_5_ng_container_3_ng_container_4_td_1_
         const ctx_r141 = i0.ɵɵnextContext();
         i0.ɵɵproperty("ngClass", ctx_r141.getCellClass(record_r142, column_r16));
         i0.ɵɵadvance(1);
-        i0.ɵɵpropertyInterpolate("svgIcon", ctx_r141.getValue(record_r142, column_r16) || column_r16.icon);
+        i0.ɵɵproperty("ngIf", column_r16.onClick);
+        i0.ɵɵadvance(1);
+        i0.ɵɵproperty("ngIf", !column_r16.onClick);
     }
 }
 function EntityTableComponent_ng_container_5_ng_container_3_ng_container_4_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainerStart(0);
-        i0.ɵɵtemplate(1, EntityTableComponent_ng_container_5_ng_container_3_ng_container_4_td_1_Template, 2, 2, "td", 57);
+        i0.ɵɵtemplate(1, EntityTableComponent_ng_container_5_ng_container_3_ng_container_4_td_1_Template, 3, 3, "td", 57);
         i0.ɵɵelementContainerEnd();
     }
 }
 function EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_span_2_ng_container_1_button_1_Template(rf, ctx) {
     if (rf & 1) {
-        const _r156 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "button", 62);
-        i0.ɵɵlistener("mousedown", function EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_span_2_ng_container_1_button_1_Template_button_mousedown_0_listener() { i0.ɵɵrestoreView(_r156); const button_r150 = i0.ɵɵnextContext(2).$implicit; const record_r148 = i0.ɵɵnextContext().$implicit; const ctx_r154 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r154.onButtonClick(button_r150.click, record_r148)); });
-        i0.ɵɵelement(1, "mat-icon", 63);
+        const _r162 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "button", 65);
+        i0.ɵɵlistener("mousedown", function EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_span_2_ng_container_1_button_1_Template_button_mousedown_0_listener() { i0.ɵɵrestoreView(_r162); const button_r156 = i0.ɵɵnextContext(2).$implicit; const record_r154 = i0.ɵɵnextContext().$implicit; const ctx_r160 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r160.onButtonClick(button_r156.click, record_r154)); });
+        i0.ɵɵelement(1, "mat-icon", 61);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const button_r150 = i0.ɵɵnextContext(2).$implicit;
-        i0.ɵɵproperty("color", button_r150.color)("disabled", button_r150.disabled);
+        const button_r156 = i0.ɵɵnextContext(2).$implicit;
+        i0.ɵɵproperty("color", button_r156.color)("disabled", button_r156.disabled);
         i0.ɵɵadvance(1);
-        i0.ɵɵpropertyInterpolate("svgIcon", button_r150.icon);
+        i0.ɵɵpropertyInterpolate("svgIcon", button_r156.icon);
     }
 }
 function EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_span_2_ng_container_1_button_2_Template(rf, ctx) {
     if (rf & 1) {
-        const _r161 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "button", 64);
-        i0.ɵɵlistener("mousedown", function EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_span_2_ng_container_1_button_2_Template_button_mousedown_0_listener() { i0.ɵɵrestoreView(_r161); const button_r150 = i0.ɵɵnextContext(2).$implicit; const record_r148 = i0.ɵɵnextContext().$implicit; const ctx_r159 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r159.onButtonClick(button_r150.click, record_r148)); });
-        i0.ɵɵelement(1, "mat-icon", 63);
+        const _r167 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "button", 66);
+        i0.ɵɵlistener("mousedown", function EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_span_2_ng_container_1_button_2_Template_button_mousedown_0_listener() { i0.ɵɵrestoreView(_r167); const button_r156 = i0.ɵɵnextContext(2).$implicit; const record_r154 = i0.ɵɵnextContext().$implicit; const ctx_r165 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r165.onButtonClick(button_r156.click, record_r154)); });
+        i0.ɵɵelement(1, "mat-icon", 61);
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const button_r150 = i0.ɵɵnextContext(2).$implicit;
-        i0.ɵɵproperty("color", button_r150.color)("disabled", button_r150.disabled);
+        const button_r156 = i0.ɵɵnextContext(2).$implicit;
+        i0.ɵɵproperty("color", button_r156.color)("disabled", button_r156.disabled);
         i0.ɵɵadvance(1);
-        i0.ɵɵpropertyInterpolate("svgIcon", button_r150.icon);
+        i0.ɵɵpropertyInterpolate("svgIcon", button_r156.icon);
     }
 }
 function EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_span_2_ng_container_1_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainerStart(0);
-        i0.ɵɵtemplate(1, EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_span_2_ng_container_1_button_1_Template, 2, 3, "button", 60);
-        i0.ɵɵtemplate(2, EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_span_2_ng_container_1_button_2_Template, 2, 3, "button", 61);
+        i0.ɵɵtemplate(1, EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_span_2_ng_container_1_button_1_Template, 2, 3, "button", 63);
+        i0.ɵɵtemplate(2, EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_span_2_ng_container_1_button_2_Template, 2, 3, "button", 64);
         i0.ɵɵelementContainerEnd();
     }
     if (rf & 2) {
-        const button_r150 = i0.ɵɵnextContext().$implicit;
+        const button_r156 = i0.ɵɵnextContext().$implicit;
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", button_r150.style === "mat-icon-button");
+        i0.ɵɵproperty("ngIf", button_r156.style === "mat-icon-button");
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", button_r150.style !== "mat-icon-button");
+        i0.ɵɵproperty("ngIf", button_r156.style !== "mat-icon-button");
     }
 }
 function EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_span_2_Template(rf, ctx) {
@@ -2773,29 +2843,29 @@ function EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_co
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const button_r150 = ctx.$implicit;
-        const record_r148 = i0.ɵɵnextContext().$implicit;
-        const ctx_r149 = i0.ɵɵnextContext(4);
+        const button_r156 = ctx.$implicit;
+        const record_r154 = i0.ɵɵnextContext().$implicit;
+        const ctx_r155 = i0.ɵɵnextContext(4);
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", ctx_r149.isEdition(record_r148) === button_r150.editMode);
+        i0.ɵɵproperty("ngIf", ctx_r155.isEdition(record_r154) === button_r156.editMode || button_r156.editMode === undefined);
     }
 }
 function EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_Template(rf, ctx) {
     if (rf & 1) {
         i0.ɵɵelementContainerStart(0);
         i0.ɵɵelementStart(1, "td", 22);
-        i0.ɵɵtemplate(2, EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_span_2_Template, 2, 1, "span", 59);
+        i0.ɵɵtemplate(2, EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_ng_container_1_span_2_Template, 2, 1, "span", 62);
         i0.ɵɵelementEnd();
         i0.ɵɵelementContainerEnd();
     }
     if (rf & 2) {
-        const record_r148 = ctx.$implicit;
+        const record_r154 = ctx.$implicit;
         const column_r16 = i0.ɵɵnextContext(3).$implicit;
-        const ctx_r147 = i0.ɵɵnextContext();
+        const ctx_r153 = i0.ɵɵnextContext();
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngClass", ctx_r147.getCellClass(record_r148, column_r16));
+        i0.ɵɵproperty("ngClass", ctx_r153.getCellClass(record_r154, column_r16));
         i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngForOf", ctx_r147.getValue(record_r148, column_r16));
+        i0.ɵɵproperty("ngForOf", ctx_r153.getValue(record_r154, column_r16));
     }
 }
 function EntityTableComponent_ng_container_5_ng_container_3_ng_container_5_Template(rf, ctx) {
@@ -2852,7 +2922,7 @@ function EntityTableComponent_ng_container_5_Template(rf, ctx) {
 }
 function EntityTableComponent_tr_6_Template(rf, ctx) {
     if (rf & 1) {
-        i0.ɵɵelement(0, "tr", 65);
+        i0.ɵɵelement(0, "tr", 67);
     }
     if (rf & 2) {
         const ctx_r3 = i0.ɵɵnextContext();
@@ -2861,22 +2931,22 @@ function EntityTableComponent_tr_6_Template(rf, ctx) {
 }
 function EntityTableComponent_tr_7_Template(rf, ctx) {
     if (rf & 1) {
-        const _r169 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "tr", 66);
-        i0.ɵɵlistener("select", function EntityTableComponent_tr_7_Template_tr_select_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r169); const record_r167 = restoredCtx.$implicit; const ctx_r168 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r168.onRowSelect(record_r167)); })("click", function EntityTableComponent_tr_7_Template_tr_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r169); const record_r167 = restoredCtx.$implicit; const ctx_r170 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r170.onRowClick(record_r167)); });
+        const _r175 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "tr", 68);
+        i0.ɵɵlistener("select", function EntityTableComponent_tr_7_Template_tr_select_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r175); const record_r173 = restoredCtx.$implicit; const ctx_r174 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r174.onRowSelect(record_r173)); })("click", function EntityTableComponent_tr_7_Template_tr_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r175); const record_r173 = restoredCtx.$implicit; const ctx_r176 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r176.onRowClick(record_r173)); });
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
-        const record_r167 = ctx.$implicit;
+        const record_r173 = ctx.$implicit;
         const ctx_r4 = i0.ɵɵnextContext();
-        i0.ɵɵproperty("scrollBehavior", ctx_r4.scrollBehavior)("ngClass", ctx_r4.getRowClass(record_r167))("selection", ctx_r4.selection)("selected", ctx_r4.rowIsSelected(record_r167));
+        i0.ɵɵproperty("scrollBehavior", ctx_r4.scrollBehavior)("ngClass", ctx_r4.getRowClass(record_r173))("selection", ctx_r4.selection)("selected", ctx_r4.rowIsSelected(record_r173));
     }
 }
 function EntityTableComponent_igo_entity_table_paginator_8_Template(rf, ctx) {
     if (rf & 1) {
-        const _r172 = i0.ɵɵgetCurrentView();
-        i0.ɵɵelementStart(0, "igo-entity-table-paginator", 67);
-        i0.ɵɵlistener("paginatorChange", function EntityTableComponent_igo_entity_table_paginator_8_Template_igo_entity_table_paginator_paginatorChange_0_listener($event) { i0.ɵɵrestoreView(_r172); const ctx_r171 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r171.paginatorChange($event)); });
+        const _r178 = i0.ɵɵgetCurrentView();
+        i0.ɵɵelementStart(0, "igo-entity-table-paginator", 69);
+        i0.ɵɵlistener("paginatorChange", function EntityTableComponent_igo_entity_table_paginator_8_Template_igo_entity_table_paginator_paginatorChange_0_listener($event) { i0.ɵɵrestoreView(_r178); const ctx_r177 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r177.paginatorChange($event)); });
         i0.ɵɵelementEnd();
     }
     if (rf & 2) {
@@ -2884,6 +2954,7 @@ function EntityTableComponent_igo_entity_table_paginator_8_Template(rf, ctx) {
         i0.ɵɵproperty("store", ctx_r5.store)("paginatorOptions", ctx_r5.paginatorOptions)("entitySortChange$", ctx_r5.entitySortChange$);
     }
 }
+const _c0$c = function (a0) { return { "height": a0 }; };
 class EntityTableComponent {
     constructor(cdRef, formBuilder, _focusMonitor, _elementRef, ngControl, _parentForm, _controlName, _defaultErrorStateMatcher, dateAdapter) {
         this.cdRef = cdRef;
@@ -2896,7 +2967,8 @@ class EntityTableComponent {
         this._defaultErrorStateMatcher = _defaultErrorStateMatcher;
         this.dateAdapter = dateAdapter;
         this.entitySortChange$ = new BehaviorSubject(false);
-        this.formGroup = new FormGroup({});
+        this.formGroup = new UntypedFormGroup({});
+        this.filteredOptions = {};
         /**
          * Reference to the column renderer types
          * @internal
@@ -2986,6 +3058,7 @@ class EntityTableComponent {
      * @internal
      */
     get fixedHeader() { return this.template.fixedHeader === undefined ? true : this.template.fixedHeader; }
+    get tableHeight() { return this.template.tableHeight ? this.template.tableHeight : 'auto'; }
     /**
      * Track the selection state to properly display the selection checkboxes
      * @internal
@@ -3028,8 +3101,8 @@ class EntityTableComponent {
      * Process autocomplete value change (edition)
      */
     onAutocompleteValueChange(column, record, event) {
-        this.formGroup.controls[column].setValue(event.option.viewValue);
-        const key = this.getColumnKeyWithoutPropertiesTag(column);
+        this.formGroup.controls[column.name].setValue(event.option.viewValue);
+        const key = this.getColumnKeyWithoutPropertiesTag(column.name);
         record.entity.properties[key] = event.option.value;
     }
     /**
@@ -3073,15 +3146,18 @@ class EntityTableComponent {
             }
             else if (column.type === 'autocomplete') {
                 this.formGroup.setControl(column.name, this.formBuilder.control(item[key]));
-                this.filteredOptions = this.formGroup.controls[column.name].valueChanges.pipe(map(value => {
-                    if (value.length) {
-                        return column.domainValues.filter((option) => {
-                            const filterNormalized = value ? value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '') : '';
-                            const featureNameNormalized = option.value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
-                            return featureNameNormalized.includes(filterNormalized);
-                        });
-                    }
-                }));
+                this.filteredOptions[column.name] = new Observable();
+                this.filteredOptions[column.name] =
+                    this.formGroup.controls[column.name].valueChanges.pipe(map(value => {
+                        var _a;
+                        if (value === null || value === void 0 ? void 0 : value.length) {
+                            return (_a = column.domainValues) === null || _a === void 0 ? void 0 : _a.filter((option) => {
+                                const filterNormalized = value ? value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '') : '';
+                                const featureNameNormalized = option.value.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
+                                return featureNameNormalized.includes(filterNormalized);
+                            });
+                        }
+                    }));
                 let formControlValue = item[key];
                 column.domainValues.forEach(option => {
                     if (typeof formControlValue === 'string' && /^\d+$/.test(formControlValue)) {
@@ -3558,8 +3634,8 @@ class EntityTableComponent {
         return column;
     }
 }
-EntityTableComponent.ɵfac = function EntityTableComponent_Factory(t) { return new (t || EntityTableComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$4.FormBuilder), i0.ɵɵdirectiveInject(i2$1.FocusMonitor), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1$4.NgControl, 10), i0.ɵɵdirectiveInject(i1$4.NgForm, 8), i0.ɵɵdirectiveInject(i1$4.FormControlName, 8), i0.ɵɵdirectiveInject(i3$1.ErrorStateMatcher), i0.ɵɵdirectiveInject(i3$1.DateAdapter)); };
-EntityTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityTableComponent, selectors: [["igo-entity-table"]], inputs: { store: "store", paginator: "paginator", template: "template", scrollBehavior: "scrollBehavior", sortNullsFirst: "sortNullsFirst", withPaginator: "withPaginator", paginatorOptions: "paginatorOptions" }, outputs: { entityClick: "entityClick", entitySelectChange: "entitySelectChange", entitySortChange: "entitySortChange" }, features: [i0.ɵɵProvidersFeature([{ provide: MatFormFieldControl, useExisting: EntityTableComponent }]), i0.ɵɵNgOnChangesFeature], decls: 9, vars: 8, consts: [[1, "table-container"], ["mat-table", "", "matSort", "", 3, "ngClass", "dataSource", "trackBy", "matSortChange"], ["matColumnDef", "selectionCheckbox", 1, "mat-cell-checkbox"], ["mat-header-cell", "", 4, "matHeaderCellDef"], ["mat-cell", "", 4, "matCellDef"], [3, "matColumnDef", 4, "ngFor", "ngForOf"], ["mat-header-row", "", 3, "ngClass", 4, "matHeaderRowDef", "matHeaderRowDefSticky"], ["mat-row", "", "igoEntityTableRow", "", 3, "scrollBehavior", "ngClass", "selection", "selected", "select", "click", 4, "matRowDef", "matRowDefColumns"], [3, "store", "paginatorOptions", "entitySortChange$", "paginatorChange", 4, "ngIf"], ["mat-header-cell", ""], [4, "ngIf"], [3, "checked", "indeterminate", "change"], ["mat-cell", ""], [3, "checked", "mousedown", "click", "change"], [3, "matColumnDef"], ["mat-header-cell", "", "mat-sort-header", "", 3, "matTooltip", 4, "matHeaderCellDef"], ["mat-header-cell", "", "mat-sort-header", "", 3, "matTooltip"], ["mat-header-cell", "", 3, "matTooltip", 4, "matHeaderCellDef"], ["mat-header-cell", "", 3, "matTooltip"], [4, "matCellDef"], ["mat-cell", "", "class", "mat-cell-text", 3, "ngClass", 4, "ngIf", "ngIfElse"], ["isAnUrlDefault", ""], ["mat-cell", "", 1, "mat-cell-text", 3, "ngClass"], ["target", "_blank", "rel", "noopener noreferrer", 3, "href", "click"], ["width", "50", "heigth", "auto", 3, "src", 4, "ngIf", "ngIfElse"], ["notImg", ""], ["width", "50", "heigth", "auto", 3, "src"], ["mat-cell", "", "class", "mat-cell-text", 3, "ngClass", "innerHTML", 4, "ngIf", "ngIfElse"], ["isAnUrlHTML", ""], ["mat-cell", "", 1, "mat-cell-text", 3, "ngClass", "innerHTML"], ["mat-cell", "", "class", "mat-cell-text edition", 3, "formGroup", "ngClass", 4, "ngIf", "ngIfElse"], ["isUnsanitizedHTML", ""], ["mat-cell", "", 1, "mat-cell-text", "edition", 3, "formGroup", "ngClass"], ["class", "date-picker", 4, "ngIf"], ["matInput", "", "type", "time", "step", "900", 3, "formControlName", "focus", "keypress", "blur", 4, "ngIf"], ["matInput", "", "type", "number", "class", "class_number_edition", 3, "formControlName", "step", "value", "readonly", "required", "min", "max", "input", 4, "ngIf"], ["matInput", "", "type", "text", 3, "formControlName", "value", "readonly", "required", "input", 4, "ngIf"], [3, "formControlName", "checked", "change", 4, "ngIf"], [3, "required", "formControlName", "multiple", "value", "selectionChange", 4, "ngIf"], ["matInput", "", "type", "text", 3, "formControlName", "matAutocomplete", "required", "value", 4, "ngIf"], ["panelWidth", "430px", 3, "optionSelected"], ["auto", "matAutocomplete"], [3, "value", 4, "ngFor", "ngForOf"], [1, "date-picker"], ["matSuffix", "", 3, "for"], ["matInput", "", 3, "matDatepicker", "formControlName", "value", "dateChange"], ["picker", ""], ["matInput", "", "type", "time", "step", "900", 3, "formControlName", "focus", "keypress", "blur"], ["matInput", "", "type", "number", 1, "class_number_edition", 3, "formControlName", "step", "value", "readonly", "required", "min", "max", "input"], ["matInput", "", "type", "text", 3, "formControlName", "value", "readonly", "required", "input"], [3, "formControlName", "checked", "change"], [3, "required", "formControlName", "multiple", "value", "selectionChange"], [3, "value", "disabled", 4, "ngFor", "ngForOf"], [3, "value", "disabled"], ["matInput", "", "type", "text", 3, "formControlName", "matAutocomplete", "required", "value"], [3, "value"], ["isAnUrlUnsanitizedHTML", ""], ["mat-cell", "", "class", "mat-cell-text", 3, "ngClass", 4, "matCellDef"], [3, "svgIcon", "click"], [4, "ngFor", "ngForOf"], ["igoStopPropagation", "", "mat-icon-button", "", 3, "color", "disabled", "mousedown", 4, "ngIf"], ["igoStopPropagation", "", "mat-mini-fab", "", 3, "color", "disabled", "mousedown", 4, "ngIf"], ["igoStopPropagation", "", "mat-icon-button", "", 3, "color", "disabled", "mousedown"], [3, "svgIcon"], ["igoStopPropagation", "", "mat-mini-fab", "", 3, "color", "disabled", "mousedown"], ["mat-header-row", "", 3, "ngClass"], ["mat-row", "", "igoEntityTableRow", "", 3, "scrollBehavior", "ngClass", "selection", "selected", "select", "click"], [3, "store", "paginatorOptions", "entitySortChange$", "paginatorChange"]], template: function EntityTableComponent_Template(rf, ctx) {
+EntityTableComponent.ɵfac = function EntityTableComponent_Factory(t) { return new (t || EntityTableComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$4.UntypedFormBuilder), i0.ɵɵdirectiveInject(i2$1.FocusMonitor), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1$4.NgControl, 10), i0.ɵɵdirectiveInject(i1$4.NgForm, 8), i0.ɵɵdirectiveInject(i1$4.FormControlName, 8), i0.ɵɵdirectiveInject(i3$1.ErrorStateMatcher), i0.ɵɵdirectiveInject(i3$1.DateAdapter)); };
+EntityTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: EntityTableComponent, selectors: [["igo-entity-table"]], inputs: { store: "store", paginator: "paginator", template: "template", scrollBehavior: "scrollBehavior", sortNullsFirst: "sortNullsFirst", withPaginator: "withPaginator", paginatorOptions: "paginatorOptions" }, outputs: { entityClick: "entityClick", entitySelectChange: "entitySelectChange", entitySortChange: "entitySortChange" }, features: [i0.ɵɵProvidersFeature([{ provide: MatFormFieldControl, useExisting: EntityTableComponent }]), i0.ɵɵNgOnChangesFeature], decls: 9, vars: 11, consts: [[1, "table-container", 3, "ngStyle"], ["mat-table", "", "matSort", "", 3, "ngClass", "dataSource", "trackBy", "matSortChange"], ["matColumnDef", "selectionCheckbox", 1, "mat-cell-checkbox"], ["mat-header-cell", "", 4, "matHeaderCellDef"], ["mat-cell", "", 4, "matCellDef"], [3, "matColumnDef", 4, "ngFor", "ngForOf"], ["mat-header-row", "", 3, "ngClass", 4, "matHeaderRowDef", "matHeaderRowDefSticky"], ["mat-row", "", "igoEntityTableRow", "", 3, "scrollBehavior", "ngClass", "selection", "selected", "select", "click", 4, "matRowDef", "matRowDefColumns"], [3, "store", "paginatorOptions", "entitySortChange$", "paginatorChange", 4, "ngIf"], ["mat-header-cell", ""], [4, "ngIf"], [3, "checked", "indeterminate", "change"], ["mat-cell", ""], [3, "checked", "mousedown", "click", "change"], [3, "matColumnDef"], ["mat-header-cell", "", "mat-sort-header", "", 3, "matTooltip", 4, "matHeaderCellDef"], ["mat-header-cell", "", "mat-sort-header", "", 3, "matTooltip"], ["mat-header-cell", "", 3, "matTooltip", 4, "matHeaderCellDef"], ["mat-header-cell", "", 3, "matTooltip"], [4, "matCellDef"], ["mat-cell", "", "class", "mat-cell-text", 3, "ngClass", 4, "ngIf", "ngIfElse"], ["isAnUrlDefault", ""], ["mat-cell", "", 1, "mat-cell-text", 3, "ngClass"], ["target", "_blank", "rel", "noopener noreferrer", 3, "href", "click"], ["igoImageError", "", "width", "50", "heigth", "auto", 3, "src", 4, "ngIf", "ngIfElse"], ["notImg", ""], ["igoImageError", "", "width", "50", "heigth", "auto", 3, "src"], ["mat-cell", "", "class", "mat-cell-text", 3, "ngClass", "innerHTML", 4, "ngIf", "ngIfElse"], ["isAnUrlHTML", ""], ["mat-cell", "", 1, "mat-cell-text", 3, "ngClass", "innerHTML"], ["mat-cell", "", "class", "mat-cell-text edition", 3, "formGroup", "ngClass", 4, "ngIf", "ngIfElse"], ["isUnsanitizedHTML", ""], ["mat-cell", "", 1, "mat-cell-text", "edition", 3, "formGroup", "ngClass"], ["class", "date-picker", 4, "ngIf"], ["matInput", "", "type", "time", "step", "900", 3, "formControlName", "focus", "keypress", "blur", 4, "ngIf"], ["matInput", "", "type", "number", "class", "class_number_edition", 3, "formControlName", "step", "value", "readonly", "required", "min", "max", "input", 4, "ngIf"], ["matInput", "", "type", "text", 3, "formControlName", "value", "readonly", "required", "input", 4, "ngIf"], [3, "formControlName", "checked", "change", 4, "ngIf"], [3, "required", "formControlName", "multiple", "value", "selectionChange", 4, "ngIf"], ["matInput", "", "type", "text", 3, "formControlName", "matAutocomplete", "required", "value", "readonly", 4, "ngIf"], ["panelWidth", "430px", 3, "optionSelected"], ["auto", "matAutocomplete"], [3, "value", 4, "ngFor", "ngForOf"], [1, "date-picker"], ["matSuffix", "", 3, "for"], ["matInput", "", 3, "matDatepicker", "formControlName", "value", "dateChange"], ["picker", ""], ["matInput", "", "type", "time", "step", "900", 3, "formControlName", "focus", "keypress", "blur"], ["matInput", "", "type", "number", 1, "class_number_edition", 3, "formControlName", "step", "value", "readonly", "required", "min", "max", "input"], ["matInput", "", "type", "text", 3, "formControlName", "value", "readonly", "required", "input"], [3, "formControlName", "checked", "change"], [3, "required", "formControlName", "multiple", "value", "selectionChange"], [3, "value", "disabled", 4, "ngFor", "ngForOf"], [3, "value", "disabled"], ["matInput", "", "type", "text", 3, "formControlName", "matAutocomplete", "required", "value", "readonly"], [3, "value"], ["isAnUrlUnsanitizedHTML", ""], ["mat-cell", "", "class", "mat-cell-text", 3, "ngClass", 4, "matCellDef"], [3, "svgIcon", "click", 4, "ngIf"], [3, "svgIcon", 4, "ngIf"], [3, "svgIcon", "click"], [3, "svgIcon"], [4, "ngFor", "ngForOf"], ["igoStopPropagation", "", "mat-icon-button", "", 3, "color", "disabled", "mousedown", 4, "ngIf"], ["igoStopPropagation", "", "mat-mini-fab", "", 3, "color", "disabled", "mousedown", 4, "ngIf"], ["igoStopPropagation", "", "mat-icon-button", "", 3, "color", "disabled", "mousedown"], ["igoStopPropagation", "", "mat-mini-fab", "", 3, "color", "disabled", "mousedown"], ["mat-header-row", "", 3, "ngClass"], ["mat-row", "", "igoEntityTableRow", "", 3, "scrollBehavior", "ngClass", "selection", "selected", "select", "click"], [3, "store", "paginatorOptions", "entitySortChange$", "paginatorChange"]], template: function EntityTableComponent_Template(rf, ctx) {
         if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "table", 1);
             i0.ɵɵlistener("matSortChange", function EntityTableComponent_Template_table_matSortChange_1_listener($event) { return ctx.onSort($event); });
@@ -3575,6 +3651,7 @@ EntityTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Entity
             i0.ɵɵelementEnd();
         }
         if (rf & 2) {
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(9, _c0$c, ctx.tableHeight));
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngClass", ctx.getTableClass())("dataSource", ctx.dataSource)("trackBy", ctx.getTrackByFunction());
             i0.ɵɵadvance(4);
@@ -3586,13 +3663,13 @@ EntityTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Entity
             i0.ɵɵadvance(1);
             i0.ɵɵproperty("ngIf", ctx.withPaginator);
         }
-    }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i5.MatTable, i5.MatHeaderCellDef, i5.MatHeaderRowDef, i5.MatColumnDef, i5.MatCellDef, i5.MatRowDef, i5.MatHeaderCell, i5.MatCell, i5.MatHeaderRow, i5.MatRow, i6.MatAutocomplete, i6.MatAutocompleteTrigger, i3$1.MatOption, i7.MatSort, i7.MatSortHeader, i3$2.MatIcon, i2$2.MatButton, i10.MatCheckbox, i4.MatSuffix, i3.MatSelect, StopPropagationDirective, EntityTablePaginatorComponent, i1$4.DefaultValueAccessor, i1$4.NumberValueAccessor, i1$4.NgControlStatus, i1$4.NgControlStatusGroup, i1$4.RequiredValidator, i1$4.MinValidator, i1$4.MaxValidator, i1$4.FormGroupDirective, i1$4.FormControlName, i5$1.MatInput, i16.MatDatepicker, i16.MatDatepickerInput, i16.MatDatepickerToggle, i6$1.MatTooltip, EntityTableRowDirective, i1.AsyncPipe, SanitizeHtmlPipe, SecureImagePipe, i6$2.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%;height:100%;display:block}.table-compact[_nghost-%COMP%]   tr.mat-header-row[_ngcontent-%COMP%], .table-compact[_nghost-%COMP%]     .mat-checkbox .mat-checkbox-ripple{height:36px}.table-compact[_nghost-%COMP%]   tr.mat-row[_ngcontent-%COMP%], .table-compact[_nghost-%COMP%]     .mat-checkbox .mat-checkbox-ripple{height:28px}.table-container[_ngcontent-%COMP%]{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}.mat-cell-text[_ngcontent-%COMP%]{overflow:hidden;word-wrap:break-word}th.mat-header-cell[_ngcontent-%COMP%], td.mat-cell[_ngcontent-%COMP%], td.mat-footer-cell[_ngcontent-%COMP%]{padding:0 3px}entity-table[_ngcontent-%COMP%]   table.igo-entity-table-with-selection[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}table[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{margin:7px}.class_hidden[_ngcontent-%COMP%]{visibility:hidden}.class_display_none[_ngcontent-%COMP%]{display:none}.class_boolean[_ngcontent-%COMP%], .class_icon[_ngcontent-%COMP%], .class_number[_ngcontent-%COMP%]{text-align:center;padding-right:35px!important}.class_sting[_ngcontent-%COMP%], .class_text[_ngcontent-%COMP%], .class_number_edition[_ngcontent-%COMP%]{text-align:left}td.edition[_ngcontent-%COMP%]{background:rgba(166,166,166,.2)}input[_ngcontent-%COMP%]{border-bottom:1px solid darkgrey}"], changeDetection: 0 });
+    }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgStyle, i5.MatTable, i5.MatHeaderCellDef, i5.MatHeaderRowDef, i5.MatColumnDef, i5.MatCellDef, i5.MatRowDef, i5.MatHeaderCell, i5.MatCell, i5.MatHeaderRow, i5.MatRow, i6.MatAutocomplete, i6.MatAutocompleteTrigger, i3$1.MatOption, i7.MatSort, i7.MatSortHeader, i3$2.MatIcon, i2$2.MatButton, i10.MatCheckbox, i4.MatSuffix, i3.MatSelect, StopPropagationDirective, EntityTablePaginatorComponent, ImageErrorDirective, i1$4.DefaultValueAccessor, i1$4.NumberValueAccessor, i1$4.NgControlStatus, i1$4.NgControlStatusGroup, i1$4.RequiredValidator, i1$4.MinValidator, i1$4.MaxValidator, i1$4.FormGroupDirective, i1$4.FormControlName, i5$1.MatInput, i17.MatDatepicker, i17.MatDatepickerInput, i17.MatDatepickerToggle, i6$1.MatTooltip, EntityTableRowDirective, i1.AsyncPipe, SanitizeHtmlPipe, SecureImagePipe, i6$2.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%;height:100%;display:block}.table-compact[_nghost-%COMP%]   tr.mat-header-row[_ngcontent-%COMP%], .table-compact[_nghost-%COMP%]     .mat-checkbox .mat-checkbox-ripple{height:36px}.table-compact[_nghost-%COMP%]   tr.mat-row[_ngcontent-%COMP%], .table-compact[_nghost-%COMP%]     .mat-checkbox .mat-checkbox-ripple{height:28px}.table-container[_ngcontent-%COMP%]{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}.mat-cell-text[_ngcontent-%COMP%]{overflow:hidden;word-wrap:break-word}th.mat-header-cell[_ngcontent-%COMP%], td.mat-cell[_ngcontent-%COMP%], td.mat-footer-cell[_ngcontent-%COMP%]{padding:0 3px}entity-table[_ngcontent-%COMP%]   table.igo-entity-table-with-selection[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}table[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]{margin:7px}.class_hidden[_ngcontent-%COMP%]{visibility:hidden}.class_display_none[_ngcontent-%COMP%]{display:none}.class_boolean[_ngcontent-%COMP%], .class_icon[_ngcontent-%COMP%], .class_number[_ngcontent-%COMP%]{text-align:center;padding-right:35px!important}.class_sting[_ngcontent-%COMP%], .class_text[_ngcontent-%COMP%], .class_number_edition[_ngcontent-%COMP%]{text-align:left}td.edition[_ngcontent-%COMP%]{background:rgba(166,166,166,.2)}input[_ngcontent-%COMP%]{border-bottom:1px solid darkgrey}"], changeDetection: 0 });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityTableComponent, [{
             type: Component,
-            args: [{ selector: 'igo-entity-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MatFormFieldControl, useExisting: EntityTableComponent }], template: "<div class=\"table-container\">\r\n  <table mat-table matSort [ngClass]=\"getTableClass()\" [dataSource]=\"dataSource\" [trackBy]=\"getTrackByFunction()\" (matSortChange)=\"onSort($event)\">\r\n      <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\r\n          <th mat-header-cell *matHeaderCellDef>\r\n              <ng-container *ngIf=\"selectMany\">\r\n                  <ng-container *ngIf=\"selectionState$ | async as selectionState\">\r\n                      <mat-checkbox (change)=\"onToggleRows($event.checked)\" [checked]=\"selectionState === entityTableSelectionState.All\"\r\n                      [indeterminate]=\"selectionState === entityTableSelectionState.Some\">\r\n                      </mat-checkbox>\r\n                  </ng-container>\r\n              </ng-container>\r\n          </th>\r\n          <td mat-cell *matCellDef=\"let record\">\r\n              <mat-checkbox (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\" (click)=\"$event.shiftKey ?\r\n              onShiftToggleRow(!rowIsSelected(record), record, $event) : $event.stopPropagation()\" (change)=\"onToggleRow($event.checked,record)\"\r\n              [checked]=\"rowIsSelected(record)\">\r\n              </mat-checkbox>\r\n          </td>\r\n      </ng-container>\r\n\r\n      <ng-container [matColumnDef]=\"column.name\" *ngFor=\"let column of template.columns\">\r\n          <ng-container *ngIf=\"columnIsSortable(column)\">\r\n              <th mat-header-cell *matHeaderCellDef mat-sort-header [matTooltip]=\"column.tooltip ? column.tooltip : undefined\">\r\n                  {{column.title}}\r\n              </th>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!columnIsSortable(column)\">\r\n              <th mat-header-cell *matHeaderCellDef [matTooltip]=\"column.tooltip ? column.tooltip : undefined\">\r\n                  {{column.title}}\r\n              </th>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"getColumnRenderer(column) as columnRenderer\">\r\n              <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.Default\">\r\n                  <ng-container *matCellDef=\"let record\">\r\n                      <td mat-cell class=\"mat-cell-text\" *ngIf=\"!isUrl(getValue(record, column));else isAnUrlDefault\" [ngClass]=\"getCellClass(record, column)\">\r\n                          {{getValue(record, column)}}\r\n                      </td>\r\n                      <ng-template #isAnUrlDefault>\r\n                          <td mat-cell class=\"mat-cell-text\" [ngClass]=\"getCellClass(record, column)\">\r\n                              <a href=\"{{getValue(record, column)}}\" target='_blank' rel=\"noopener noreferrer\" (click)=\"$event.stopPropagation()\">\r\n                                  <img *ngIf=\"isImg(getValue(record, column));else notImg\" src=\"{{(getValue(record, column) | secureImage) | async}}\" width=\"50\" heigth=\"auto\">\r\n                                  <ng-template #notImg><span>{{\r\n                    'igo.common.entity-table.targetHtmlUrl' | translate }}\r\n                  </span></ng-template>\r\n                              </a>\r\n                          </td>\r\n                      </ng-template>\r\n                  </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.HTML\">\r\n                  <ng-container *matCellDef=\"let record\">\r\n                      <td mat-cell class=\"mat-cell-text\" *ngIf=\"!isUrl(getValue(record, column));else isAnUrlHTML\" [ngClass]=\"getCellClass(record, column)\"\r\n                      [innerHTML]=\"getValue(record, column)\">\r\n                      </td>\r\n                      <ng-template #isAnUrlHTML>\r\n                          <td mat-cell class=\"mat-cell-text\" [ngClass]=\"getCellClass(record, column)\">\r\n                              <a href=\"{{getValue(record, column)}}\" target='_blank' rel=\"noopener noreferrer\" (click)=\"$event.stopPropagation()\">\r\n                                  <img *ngIf=\"isImg(getValue(record, column));else notImg\" src=\"{{(getValue(record, column) | secureImage) | async}}\" width=\"50\" heigth=\"auto\">\r\n                                  <ng-template #notImg><span>{{ 'igo.geo.targetHtmlUrl' |\r\n                    translate }} </span></ng-template>\r\n                              </a>\r\n                          </td>\r\n                      </ng-template>\r\n                  </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.UnsanitizedHTML\">\r\n                  <ng-container *matCellDef=\"let record\">\r\n                      <td mat-cell class=\"mat-cell-text edition\" [formGroup]=\"formGroup\" *ngIf=\"isEdition(record);else isUnsanitizedHTML\"\r\n                      [ngClass]=\"getCellClass(record, column)\">\r\n                          <div class=\"date-picker\" *ngIf=\"column.type === 'date'\">\r\n                              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n                              <input matInput [matDatepicker]=\"picker\" [formControlName]=\"column.name\" value=\"{{getValue(record, column)}}\"\r\n                              (dateChange)=\"onDateChange(column.name, record, $event)\">\r\n                              <mat-datepicker #picker></mat-datepicker>\r\n                          </div>\r\n                          <input matInput type=\"time\" *ngIf=\"column.type === 'time'\" [formControlName]=\"column.name\" step=\"900\" (focus)=\"column.onFocus($event)\"\r\n                          (keypress)=\"column.onChange($event)\" (blur)=\"column.onBlur($event)\">\r\n                          <input matInput type=\"number\" class=\"class_number_edition\" *ngIf=\"column.type === 'number'\" [formControlName]=\"column.name\" step=\"{{column.step}}\"\r\n                          value=\"{{getValue(record,column)}}\" (input)=\"onValueChange(column.name, record, $event)\"\r\n                          readonly=\"{{getValidationAttributeValue(column, 'readonly')}}\" required=\"{{getValidationAttributeValue(column, 'mandatory')}}\"\r\n                          min=\"{{getValidationAttributeValue(column, 'minValue')}}\" max=\"{{getValidationAttributeValue(column, 'maxValue')}}\">\r\n                          <input matInput type=\"text\" *ngIf=\"!column.type || column.type ==='string'\" [formControlName]=\"column.name\"\r\n                          value=\"{{getValue(record, column)}}\" (input)=\"onValueChange(column.name, record, $event)\"\r\n                          readonly=\"{{getValidationAttributeValue(column, 'readonly')}}\" required=\"{{getValidationAttributeValue(column, 'mandatory')}}\">\r\n                          <mat-checkbox *ngIf=\"column.type === 'boolean'\" [formControlName]=\"column.name\" [checked]=\"getValue(record,column)\"\r\n                          (change)=\"onBooleanValueChange(column.name, record,$event)\"></mat-checkbox>\r\n                          <mat-select *ngIf=\"column.type === 'list'\" required=\"{{getValidationAttributeValue(column, 'mandatory')}}\"\r\n                          [formControlName]=\"column.name\" [multiple]=\"column.multiple\" (selectionChange)=\"onSelectValueChange(column.name, record, $event)\"\r\n                          [value]=\"getValue(record, column)\">\r\n                              <mat-option *ngFor=\"let option of column.domainValues\" [value]=\"option.id\" [disabled]=\"option.disabled\">\r\n                                  {{ option.value }}\r\n                              </mat-option>\r\n                          </mat-select>\r\n                          <input matInput type=\"text\" [formControlName]=\"column.name\" *ngIf=\"column.type === 'autocomplete'\"\r\n                          [matAutocomplete]=\"auto\" required=\"{{getValidationAttributeValue(column, 'mandatory')}}\" value=\"{{getValue(record, column)}}\">\r\n                              <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onAutocompleteValueChange(column.name, record, $event)\"\r\n                              panelWidth=\"430px\">\r\n                                  <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.id\">\r\n                                      {{ option.value }}\r\n                                  </mat-option>\r\n                              </mat-autocomplete>\r\n                      </td>\r\n                      <ng-template #isUnsanitizedHTML>\r\n                          <td mat-cell class=\"mat-cell-text\" *ngIf=\"!isUrl(getValue(record, column));else isAnUrlUnsanitizedHTML\" [ngClass]=\"getCellClass(record, column)\"\r\n                          [innerHTML]=\"getValue(record, column) | sanitizeHtml\">\r\n                          </td>\r\n                          <ng-template #isAnUrlUnsanitizedHTML>\r\n                              <td mat-cell class=\"mat-cell-text\" [ngClass]=\"getCellClass(record, column)\">\r\n                                  <a href=\"{{getValue(record, column)}}\" target='_blank' rel=\"noopener noreferrer\" (click)=\"$event.stopPropagation()\">\r\n                                      <img *ngIf=\"isImg(getValue(record, column));else notImg\" src=\"{{(getValue(record, column) | secureImage) | async}}\" width=\"50\" heigth=\"auto\">\r\n                                      <ng-template #notImg><span>{{ 'igo.geo.targetHtmlUrl' | translate }} </span></ng-template>\r\n                                  </a>\r\n                              </td>\r\n                          </ng-template>\r\n                      </ng-template>\r\n                  </ng-container>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.Icon\">\r\n                  <td mat-cell *matCellDef=\"let record\" class=\"mat-cell-text\" [ngClass]=\"getCellClass(record, column)\">\r\n                      <mat-icon svgIcon=\"{{getValue(record, column)|| column.icon}}\" (click)=\"column.onClick($event)\"></mat-icon>\r\n                  </td>\r\n              </ng-container>\r\n              <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.ButtonGroup\">\r\n                  <ng-container *matCellDef=\"let record\">\r\n                      <td mat-cell class=\"mat-cell-text\" [ngClass]=\"getCellClass(record, column)\">\r\n                          <span *ngFor=\"let button of getValue(record, column)\">\r\n                              <ng-container *ngIf=\"isEdition(record) === button.editMode\">\r\n                                  <button *ngIf=\"button.style === 'mat-icon-button'\" igoStopPropagation mat-icon-button\r\n                                      [color]=\"button.color\" (mousedown)=\"onButtonClick(button.click, record)\" [disabled]=\"button.disabled\">\r\n                                      <mat-icon svgIcon=\"{{button.icon}}\"></mat-icon>\r\n                                  </button>\r\n                                  <button *ngIf=\"button.style !== 'mat-icon-button'\" igoStopPropagation mat-mini-fab\r\n                                      [color]=\"button.color\" (mousedown)=\"onButtonClick(button.click, record)\" [disabled]=\"button.disabled\">\r\n                                      <mat-icon svgIcon=\"{{button.icon}}\"></mat-icon>\r\n                                  </button>\r\n                              </ng-container>\r\n                          </span>\r\n                      </td>\r\n                  </ng-container>\r\n              </ng-container>\r\n          </ng-container>\r\n      </ng-container>\r\n\r\n      <tr mat-header-row *matHeaderRowDef=\"headers; sticky: fixedHeader;\" [ngClass]=\"getHeaderClass()\">\r\n      </tr>\r\n      <tr mat-row igoEntityTableRow *matRowDef=\"let record; columns: headers;\" [scrollBehavior]=\"scrollBehavior\" [ngClass]=\"getRowClass(record)\" [selection]=\"selection\" [selected]=\"rowIsSelected(record)\" (select)=\"onRowSelect(record)\" (click)=\"onRowClick(record)\">\r\n      </tr>\r\n  </table>\r\n  <igo-entity-table-paginator *ngIf=\"withPaginator\" [store]=\"store\" [paginatorOptions]=\"paginatorOptions\" [entitySortChange$]=\"entitySortChange$\" (paginatorChange)=\"paginatorChange($event)\">\r\n  </igo-entity-table-paginator>\r\n</div>", styles: [":host{width:100%;height:100%;display:block}:host.table-compact tr.mat-header-row,:host.table-compact ::ng-deep .mat-checkbox .mat-checkbox-ripple{height:36px}:host.table-compact tr.mat-row,:host.table-compact ::ng-deep .mat-checkbox .mat-checkbox-ripple{height:28px}.table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}.mat-cell-text{overflow:hidden;word-wrap:break-word}th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:0 3px}entity-table table.igo-entity-table-with-selection tr:hover{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}table button{margin:7px}.class_hidden{visibility:hidden}.class_display_none{display:none}.class_boolean,.class_icon,.class_number{text-align:center;padding-right:35px!important}.class_sting,.class_text,.class_number_edition{text-align:left}td.edition{background:rgba(166,166,166,.2)}input{border-bottom:1px solid darkgrey}\n"] }]
+            args: [{ selector: 'igo-entity-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: MatFormFieldControl, useExisting: EntityTableComponent }], template: "<div class=\"table-container\" [ngStyle]=\"{'height': tableHeight}\">\n  <table mat-table matSort [ngClass]=\"getTableClass()\" [dataSource]=\"dataSource\" [trackBy]=\"getTrackByFunction()\" (matSortChange)=\"onSort($event)\">\n      <ng-container matColumnDef=\"selectionCheckbox\" class=\"mat-cell-checkbox\">\n          <th mat-header-cell *matHeaderCellDef>\n              <ng-container *ngIf=\"selectMany\">\n                  <ng-container *ngIf=\"selectionState$ | async as selectionState\">\n                      <mat-checkbox (change)=\"onToggleRows($event.checked)\" [checked]=\"selectionState === entityTableSelectionState.All\"\n                      [indeterminate]=\"selectionState === entityTableSelectionState.Some\">\n                      </mat-checkbox>\n                  </ng-container>\n              </ng-container>\n          </th>\n          <td mat-cell *matCellDef=\"let record\">\n              <mat-checkbox (mousedown)=\"$event.shiftKey ? $event.preventDefault() : null\" (click)=\"$event.shiftKey ?\n              onShiftToggleRow(!rowIsSelected(record), record, $event) : $event.stopPropagation()\" (change)=\"onToggleRow($event.checked,record)\"\n              [checked]=\"rowIsSelected(record)\">\n              </mat-checkbox>\n          </td>\n      </ng-container>\n\n      <ng-container [matColumnDef]=\"column.name\" *ngFor=\"let column of template.columns\">\n          <ng-container *ngIf=\"columnIsSortable(column)\">\n              <th mat-header-cell *matHeaderCellDef mat-sort-header [matTooltip]=\"column.tooltip ? column.tooltip : undefined\">\n                  {{column.title}}\n              </th>\n          </ng-container>\n\n          <ng-container *ngIf=\"!columnIsSortable(column)\">\n              <th mat-header-cell *matHeaderCellDef [matTooltip]=\"column.tooltip ? column.tooltip : undefined\">\n                  {{column.title}}\n              </th>\n          </ng-container>\n\n          <ng-container *ngIf=\"getColumnRenderer(column) as columnRenderer\">\n              <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.Default\">\n                  <ng-container *matCellDef=\"let record\">\n                      <td mat-cell class=\"mat-cell-text\" *ngIf=\"!isUrl(getValue(record, column));else isAnUrlDefault\" [ngClass]=\"getCellClass(record, column)\">\n                          {{getValue(record, column)}}\n                      </td>\n                      <ng-template #isAnUrlDefault>\n                          <td mat-cell class=\"mat-cell-text\" [ngClass]=\"getCellClass(record, column)\">\n                              <a href=\"{{getValue(record, column)}}\" target='_blank' rel=\"noopener noreferrer\" (click)=\"$event.stopPropagation()\">\n                                  <img igoImageError *ngIf=\"isImg(getValue(record, column));else notImg\" src=\"{{(getValue(record, column) | secureImage) | async}}\" width=\"50\" heigth=\"auto\">\n                                  <ng-template #notImg><span>{{\n                    'igo.common.entity-table.targetHtmlUrl' | translate }}\n                  </span></ng-template>\n                              </a>\n                          </td>\n                      </ng-template>\n                  </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.HTML\">\n                  <ng-container *matCellDef=\"let record\">\n                      <td mat-cell class=\"mat-cell-text\" *ngIf=\"!isUrl(getValue(record, column));else isAnUrlHTML\" [ngClass]=\"getCellClass(record, column)\"\n                      [innerHTML]=\"getValue(record, column)\">\n                      </td>\n                      <ng-template #isAnUrlHTML>\n                          <td mat-cell class=\"mat-cell-text\" [ngClass]=\"getCellClass(record, column)\">\n                              <a href=\"{{getValue(record, column)}}\" target='_blank' rel=\"noopener noreferrer\" (click)=\"$event.stopPropagation()\">\n                                  <img igoImageError *ngIf=\"isImg(getValue(record, column));else notImg\" src=\"{{(getValue(record, column) | secureImage) | async}}\" width=\"50\" heigth=\"auto\">\n                                  <ng-template #notImg><span>{{ 'igo.geo.targetHtmlUrl' |\n                    translate }} </span></ng-template>\n                              </a>\n                          </td>\n                      </ng-template>\n                  </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.UnsanitizedHTML\">\n                  <ng-container *matCellDef=\"let record\">\n                      <td mat-cell class=\"mat-cell-text edition\" [formGroup]=\"formGroup\" *ngIf=\"isEdition(record);else isUnsanitizedHTML\"\n                      [ngClass]=\"getCellClass(record, column)\">\n                          <div class=\"date-picker\" *ngIf=\"column.type === 'date'\">\n                              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n                              <input matInput [matDatepicker]=\"picker\" [formControlName]=\"column.name\" value=\"{{getValue(record, column)}}\"\n                              (dateChange)=\"onDateChange(column.name, record, $event)\">\n                              <mat-datepicker #picker></mat-datepicker>\n                          </div>\n                          <input matInput type=\"time\" *ngIf=\"column.type === 'time'\" [formControlName]=\"column.name\" step=\"900\" (focus)=\"column.onFocus($event)\"\n                          (keypress)=\"column.onChange($event)\" (blur)=\"column.onBlur($event)\">\n                          <input matInput type=\"number\" class=\"class_number_edition\" *ngIf=\"column.type === 'number'\" [formControlName]=\"column.name\" step=\"{{column.step}}\"\n                          value=\"{{getValue(record,column)}}\" (input)=\"onValueChange(column.name, record, $event)\"\n                          readonly=\"{{getValidationAttributeValue(column, 'readonly')}}\" required=\"{{getValidationAttributeValue(column, 'mandatory')}}\"\n                          min=\"{{getValidationAttributeValue(column, 'minValue')}}\" max=\"{{getValidationAttributeValue(column, 'maxValue')}}\">\n                          <input matInput type=\"text\" *ngIf=\"!column.type || column.type ==='string'\" [formControlName]=\"column.name\"\n                          value=\"{{getValue(record, column)}}\" (input)=\"onValueChange(column.name, record, $event)\"\n                          readonly=\"{{getValidationAttributeValue(column, 'readonly')}}\" required=\"{{getValidationAttributeValue(column, 'mandatory')}}\">\n                          <mat-checkbox *ngIf=\"column.type === 'boolean'\" [formControlName]=\"column.name\" [checked]=\"getValue(record,column)\"\n                          (change)=\"onBooleanValueChange(column.name, record,$event)\"></mat-checkbox>\n                          <mat-select *ngIf=\"column.type === 'list'\" required=\"{{getValidationAttributeValue(column, 'mandatory')}}\"\n                          [formControlName]=\"column.name\" [multiple]=\"column.multiple\" (selectionChange)=\"onSelectValueChange(column.name, record, $event)\"\n                          [value]=\"getValue(record, column)\">\n                              <mat-option *ngFor=\"let option of column.domainValues\" [value]=\"option.id\" [disabled]=\"option.disabled\">\n                                  {{ option.value }}\n                              </mat-option>\n                          </mat-select>\n                          <input matInput type=\"text\" [formControlName]=\"column.name\" *ngIf=\"column.type === 'autocomplete'\" [matAutocomplete]=\"auto\"\n                            required=\"{{getValidationAttributeValue(column, 'mandatory')}}\" value=\"{{getValue(record, column)}}\"\n                            readonly=\"{{getValidationAttributeValue(column, 'readonly')}}\">\n                                <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onAutocompleteValueChange(column, record, $event)\"\n                                panelWidth=\"430px\">\n                                    <mat-option *ngFor=\"let option of filteredOptions[column.name] | async\"\n                                        [value]=\"option.id\">\n                                        {{ option.value }}\n                                    </mat-option>\n                                </mat-autocomplete>\n                      </td>\n                      <ng-template #isUnsanitizedHTML>\n                          <td mat-cell class=\"mat-cell-text\" *ngIf=\"!isUrl(getValue(record, column));else isAnUrlUnsanitizedHTML\" [ngClass]=\"getCellClass(record, column)\"\n                          [innerHTML]=\"getValue(record, column) | sanitizeHtml\">\n                          </td>\n                          <ng-template #isAnUrlUnsanitizedHTML>\n                              <td mat-cell class=\"mat-cell-text\" [ngClass]=\"getCellClass(record, column)\">\n                                  <a href=\"{{getValue(record, column)}}\" target='_blank' rel=\"noopener noreferrer\" (click)=\"$event.stopPropagation()\">\n                                      <img igoImageError *ngIf=\"isImg(getValue(record, column));else notImg\" src=\"{{(getValue(record, column) | secureImage) | async}}\" width=\"50\" heigth=\"auto\">\n                                      <ng-template #notImg><span>{{ 'igo.geo.targetHtmlUrl' | translate }} </span></ng-template>\n                                  </a>\n                              </td>\n                          </ng-template>\n                      </ng-template>\n                  </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.Icon\">\n                  <td mat-cell *matCellDef=\"let record\" class=\"mat-cell-text\" [ngClass]=\"getCellClass(record, column)\">\n                      <mat-icon *ngIf=\"column.onClick\" svgIcon=\"{{getValue(record, column)|| column.icon}}\" (click)=\"column.onClick($event)\"></mat-icon>\n                      <mat-icon *ngIf=\"!column.onClick\" svgIcon=\"{{getValue(record, column)|| column.icon}}\"></mat-icon>\n                  </td>\n              </ng-container>\n              <ng-container *ngIf=\"columnRenderer === entityTableColumnRenderer.ButtonGroup\">\n                  <ng-container *matCellDef=\"let record\">\n                      <td mat-cell class=\"mat-cell-text\" [ngClass]=\"getCellClass(record, column)\">\n                          <span *ngFor=\"let button of getValue(record, column)\">\n                              <ng-container *ngIf=\"isEdition(record) === button.editMode || button.editMode === undefined\">\n                                  <button *ngIf=\"button.style === 'mat-icon-button'\" igoStopPropagation mat-icon-button\n                                      [color]=\"button.color\" (mousedown)=\"onButtonClick(button.click, record)\" [disabled]=\"button.disabled\">\n                                      <mat-icon svgIcon=\"{{button.icon}}\"></mat-icon>\n                                  </button>\n                                  <button *ngIf=\"button.style !== 'mat-icon-button'\" igoStopPropagation mat-mini-fab\n                                      [color]=\"button.color\" (mousedown)=\"onButtonClick(button.click, record)\" [disabled]=\"button.disabled\">\n                                      <mat-icon svgIcon=\"{{button.icon}}\"></mat-icon>\n                                  </button>\n                              </ng-container>\n                          </span>\n                      </td>\n                  </ng-container>\n              </ng-container>\n          </ng-container>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef=\"headers; sticky: fixedHeader;\" [ngClass]=\"getHeaderClass()\">\n      </tr>\n      <tr mat-row igoEntityTableRow *matRowDef=\"let record; columns: headers;\" [scrollBehavior]=\"scrollBehavior\" [ngClass]=\"getRowClass(record)\" [selection]=\"selection\" [selected]=\"rowIsSelected(record)\" (select)=\"onRowSelect(record)\" (click)=\"onRowClick(record)\">\n      </tr>\n  </table>\n  <igo-entity-table-paginator *ngIf=\"withPaginator\" [store]=\"store\" [paginatorOptions]=\"paginatorOptions\" [entitySortChange$]=\"entitySortChange$\" (paginatorChange)=\"paginatorChange($event)\">\n  </igo-entity-table-paginator>\n</div>", styles: [":host{width:100%;height:100%;display:block}:host.table-compact tr.mat-header-row,:host.table-compact ::ng-deep .mat-checkbox .mat-checkbox-ripple{height:36px}:host.table-compact tr.mat-row,:host.table-compact ::ng-deep .mat-checkbox .mat-checkbox-ripple{height:28px}.table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}.mat-cell-text{overflow:hidden;word-wrap:break-word}th.mat-header-cell,td.mat-cell,td.mat-footer-cell{padding:0 3px}entity-table table.igo-entity-table-with-selection tr:hover{-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd;cursor:pointer}table button{margin:7px}.class_hidden{visibility:hidden}.class_display_none{display:none}.class_boolean,.class_icon,.class_number{text-align:center;padding-right:35px!important}.class_sting,.class_text,.class_number_edition{text-align:left}td.edition{background:rgba(166,166,166,.2)}input{border-bottom:1px solid darkgrey}\n"] }]
         }], function () {
-        return [{ type: i0.ChangeDetectorRef }, { type: i1$4.FormBuilder }, { type: i2$1.FocusMonitor }, { type: i0.ElementRef }, { type: i1$4.NgControl, decorators: [{
+        return [{ type: i0.ChangeDetectorRef }, { type: i1$4.UntypedFormBuilder }, { type: i2$1.FocusMonitor }, { type: i0.ElementRef }, { type: i1$4.NgControl, decorators: [{
                         type: Optional
                     }, {
                         type: Self
@@ -3875,7 +3952,7 @@ ActionbarItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Acti
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionbarItemComponent, [{
             type: Component,
-            args: [{ selector: 'igo-actionbar-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item *ngIf=\"!action.checkbox\"\r\n  matTooltipClass=\"actionbarItemTooltip\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"withTooltip ? ((tooltip$ | async) || title | translate) : ''\"\r\n  [ngClass]=\"ngClass$ | async\"\r\n  (click)=\"onClick()\">\r\n  <button *ngIf=\"withIcon\"\r\n    mat-list-avatar\r\n    mat-icon-button\r\n    [color]=\"color\"\r\n    [disabled]=\"disabled$ | async\">\r\n    <mat-icon *ngIf=\"withIcon\" svgIcon=\"{{icon$ | async}}\"></mat-icon>\r\n  </button>\r\n  <h4 *ngIf=\"withTitle\" matLine>{{title | translate}}</h4>\r\n</mat-list-item>\r\n\r\n<mat-list-item class=\"item-checkbox\" *ngIf=\"action.checkbox\"\r\n  matTooltipClass=\"actionbarItemTooltip\"\r\n  matTooltipShowDelay=\"500\"\r\n  [matTooltip]=\"withTooltip ? ((tooltip$ | async) || title | translate) : ''\"\r\n  [ngClass]=\"ngClass$ | async\">\r\n  <mat-checkbox *ngIf=\"withTitle\"\r\n      (change)=\"action.handler()\"\r\n      [checked]=\"checkCondition$ | async\">\r\n      {{title | translate}}\r\n  </mat-checkbox>\r\n</mat-list-item>\r\n", styles: ["mat-list-item.igo-actionbar-item-disabled{color:#00000042;cursor:default!important}mat-list-item.igo-actionbar-item-no-display{display:none}mat-checkbox{padding:12px}.item-checkbox{height:56px}.item-checkbox ::ng-deep .mat-checkbox-label{margin-left:20px}\n"] }]
+            args: [{ selector: 'igo-actionbar-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list-item *ngIf=\"!action.checkbox\"\n  matTooltipClass=\"actionbarItemTooltip\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"withTooltip ? ((tooltip$ | async) || title | translate) : ''\"\n  [ngClass]=\"ngClass$ | async\"\n  (click)=\"onClick()\">\n  <button *ngIf=\"withIcon\"\n    mat-list-avatar\n    mat-icon-button\n    [color]=\"color\"\n    [disabled]=\"disabled$ | async\">\n    <mat-icon *ngIf=\"withIcon\" svgIcon=\"{{icon$ | async}}\"></mat-icon>\n  </button>\n  <h4 *ngIf=\"withTitle\" matLine>{{title | translate}}</h4>\n</mat-list-item>\n\n<mat-list-item class=\"item-checkbox\" *ngIf=\"action.checkbox\"\n  matTooltipClass=\"actionbarItemTooltip\"\n  matTooltipShowDelay=\"500\"\n  [matTooltip]=\"withTooltip ? ((tooltip$ | async) || title | translate) : ''\"\n  [ngClass]=\"ngClass$ | async\">\n  <mat-checkbox *ngIf=\"withTitle\"\n      (change)=\"action.handler()\"\n      [checked]=\"checkCondition$ | async\">\n      {{title | translate}}\n  </mat-checkbox>\n</mat-list-item>\n", styles: ["mat-list-item.igo-actionbar-item-disabled{color:#00000042;cursor:default!important}mat-list-item.igo-actionbar-item-no-display{display:none}mat-checkbox{padding:12px}.item-checkbox{height:56px}.item-checkbox ::ng-deep .mat-checkbox-label{margin-left:20px}\n"] }]
         }], function () { return []; }, { action: [{
                 type: Input
             }], color: [{
@@ -4244,7 +4321,7 @@ ActionbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Actionba
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionbarComponent, [{
             type: Component,
-            args: [{ selector: 'igo-actionbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list *ngIf=\"mode === actionbarMode.Dock\">\r\n\r\n    <div *ngIf=\"heightCondition && positionConditionTop && isDesktop\"\r\n      id=\"topChevron\">\r\n      <button\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.common.actionbar.scrollUp' | translate\"\r\n        (click)=\"scrollUp()\">\r\n        <mat-icon svgIcon=\"chevron-up\"></mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <igo-actionbar-item\r\n      *ngIf=\"withToggleButton\"\r\n      color=\"accent\"\r\n      [withTitle]=\"false\"\r\n      [withIcon]=\"true\"\r\n      [color]=\"color\"\r\n      [disabled]=\"store.view.empty\"\r\n      [action]=\"toggleCollapseAction\"\r\n      (trigger)=\"onTriggerAction(toggleCollapseAction)\">\r\n    </igo-actionbar-item>\r\n\r\n    <ng-template #buttonContent *ngIf=\"!collapsed\" ngFor let-action [ngForOf]=\"store.view.all$() | async\">\r\n      <igo-actionbar-item\r\n        color=\"accent\"\r\n        [withTitle]=\"withTitle\"\r\n        [withIcon]=\"withIcon\"\r\n        [withTooltip]=\"withTooltip\"\r\n        [color]=\"color\"\r\n        [disabled]=\"store.state.get(action).disabled\"\r\n        [action]=\"action\"\r\n        (trigger)=\"onTriggerAction(action)\">\r\n      </igo-actionbar-item>\r\n    </ng-template>\r\n\r\n    <div *ngIf=\"heightCondition && positionConditionLow && isDesktop\"\r\n      id=\"lowChevron\">\r\n      <button\r\n        mat-icon-button\r\n        tooltip-position=\"below\"\r\n        matTooltipShowDelay=\"500\"\r\n        [matTooltip]=\"'igo.common.actionbar.scrollDown' | translate\"\r\n        (click)=\"scrollDown()\">\r\n        <mat-icon svgIcon=\"chevron-down\"></mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n</mat-list>\r\n\r\n<div *ngIf=\"mode === actionbarMode.Overlay\">\r\n  <button class=\"buttonOverlay\"\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.common.actionbar.icon' | translate\"\r\n    [matMenuTriggerFor]=\"actionbarMenu\"\r\n    [disabled]=\"store.view.empty\"\r\n    [color]=\"iconColor\">\r\n    <mat-icon [svgIcon]=\"icon\"></mat-icon>\r\n  </button>\r\n\r\n  <mat-menu\r\n    #actionbarMenu=\"matMenu\"\r\n    class=\"igo-compact-menu igo-no-min-width-menu\"\r\n    overlapTrigger=\"true\"\r\n    [xPosition]=\"xPosition\"\r\n    [yPosition]=\"yPosition\"\r\n    [class]=\"overlayClass\">\r\n\r\n    <mat-list>\r\n      <ng-template ngFor let-action [ngForOf]=\"store.view.all$() | async\">\r\n        <igo-actionbar-item\r\n          color=\"accent\"\r\n          [withTitle]=\"withTitle\"\r\n          [withIcon]=\"withIcon\"\r\n          [color]=\"color\"\r\n          [action]=\"action\"\r\n          (trigger)=\"onTriggerAction(action)\">\r\n        </igo-actionbar-item>\r\n      </ng-template>\r\n    </mat-list>\r\n  </mat-menu>\r\n</div>\r\n<mat-card *ngIf=\"mode === actionbarMode.Context\" class=\"context-menu-card mat-elevation-z4\">\r\n  <mat-list>\r\n      <ng-template ngFor let-action [ngForOf]=\"store.view.all$() | async\">\r\n          <igo-actionbar-item\r\n            color=\"accent\"\r\n            [withTitle]=\"withTitle\"\r\n            [withIcon]=\"withIcon\"\r\n            [color]=\"color\"\r\n            [action]=\"action\"\r\n            (trigger)=\"onTriggerAction(action)\">\r\n          </igo-actionbar-item>\r\n        <br/>\r\n      </ng-template>\r\n  </mat-list>\r\n</mat-card>\r\n", styles: [":host{display:block;height:100%;overflow:auto;position:relative}button{margin:4px}.buttonOverlay{margin:0}mat-list{padding-top:0}:host.horizontal{max-width:100%;overflow:visible;overflow:initial}:host.horizontal mat-list{width:auto;white-space:nowrap}:host.horizontal igo-actionbar-item{display:inline-block}:host ::ng-deep .mat-list .mat-list-item .mat-list-text>*{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;max-height:36px;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host ::ng-deep .mat-list-base .mat-list-item.mat-list-item-with-avatar{height:46px}:host ::ng-deep .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content{display:-webkit-flex;height:46px;padding:3px}:host ::ng-deep .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content>mat-icon{padding:8px}igo-actionbar-item ::ng-deep mat-list-item [mat-list-avatar]{height:auto;width:40px}igo-actionbar-item ::ng-deep mat-list-item:hover{cursor:pointer}.context-menu-card{padding:8px 3px;margin:10px}#topChevron{position:-webkit-sticky;position:sticky;top:0;background-color:#fff;z-index:3}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){#topChevron{position:fixed;top:auto;top:initial}}@supports (-ms-accelerator: true){#topChevron{position:fixed;top:auto;top:initial}}#lowChevron{position:fixed;position:-webkit-sticky;position:sticky;bottom:0;background-color:#fff;z-index:3}\n"] }]
+            args: [{ selector: 'igo-actionbar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-list *ngIf=\"mode === actionbarMode.Dock\">\n\n    <div *ngIf=\"heightCondition && positionConditionTop && isDesktop\"\n      id=\"topChevron\">\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.common.actionbar.scrollUp' | translate\"\n        (click)=\"scrollUp()\">\n        <mat-icon svgIcon=\"chevron-up\"></mat-icon>\n      </button>\n    </div>\n\n    <igo-actionbar-item\n      *ngIf=\"withToggleButton\"\n      color=\"accent\"\n      [withTitle]=\"false\"\n      [withIcon]=\"true\"\n      [color]=\"color\"\n      [disabled]=\"store.view.empty\"\n      [action]=\"toggleCollapseAction\"\n      (trigger)=\"onTriggerAction(toggleCollapseAction)\">\n    </igo-actionbar-item>\n\n    <ng-template #buttonContent *ngIf=\"!collapsed\" ngFor let-action [ngForOf]=\"store.view.all$() | async\">\n      <igo-actionbar-item\n        color=\"accent\"\n        [withTitle]=\"withTitle\"\n        [withIcon]=\"withIcon\"\n        [withTooltip]=\"withTooltip\"\n        [color]=\"color\"\n        [disabled]=\"store.state.get(action).disabled\"\n        [action]=\"action\"\n        (trigger)=\"onTriggerAction(action)\">\n      </igo-actionbar-item>\n    </ng-template>\n\n    <div *ngIf=\"heightCondition && positionConditionLow && isDesktop\"\n      id=\"lowChevron\">\n      <button\n        mat-icon-button\n        tooltip-position=\"below\"\n        matTooltipShowDelay=\"500\"\n        [matTooltip]=\"'igo.common.actionbar.scrollDown' | translate\"\n        (click)=\"scrollDown()\">\n        <mat-icon svgIcon=\"chevron-down\"></mat-icon>\n      </button>\n    </div>\n\n</mat-list>\n\n<div *ngIf=\"mode === actionbarMode.Overlay\">\n  <button class=\"buttonOverlay\"\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.common.actionbar.icon' | translate\"\n    [matMenuTriggerFor]=\"actionbarMenu\"\n    [disabled]=\"store.view.empty\"\n    [color]=\"iconColor\">\n    <mat-icon [svgIcon]=\"icon\"></mat-icon>\n  </button>\n\n  <mat-menu\n    #actionbarMenu=\"matMenu\"\n    class=\"igo-compact-menu igo-no-min-width-menu\"\n    overlapTrigger=\"true\"\n    [xPosition]=\"xPosition\"\n    [yPosition]=\"yPosition\"\n    [class]=\"overlayClass\">\n\n    <mat-list>\n      <ng-template ngFor let-action [ngForOf]=\"store.view.all$() | async\">\n        <igo-actionbar-item\n          color=\"accent\"\n          [withTitle]=\"withTitle\"\n          [withIcon]=\"withIcon\"\n          [color]=\"color\"\n          [action]=\"action\"\n          (trigger)=\"onTriggerAction(action)\">\n        </igo-actionbar-item>\n      </ng-template>\n    </mat-list>\n  </mat-menu>\n</div>\n<mat-card *ngIf=\"mode === actionbarMode.Context\" class=\"context-menu-card mat-elevation-z4\">\n  <mat-list>\n      <ng-template ngFor let-action [ngForOf]=\"store.view.all$() | async\">\n          <igo-actionbar-item\n            color=\"accent\"\n            [withTitle]=\"withTitle\"\n            [withIcon]=\"withIcon\"\n            [color]=\"color\"\n            [action]=\"action\"\n            (trigger)=\"onTriggerAction(action)\">\n          </igo-actionbar-item>\n        <br/>\n      </ng-template>\n  </mat-list>\n</mat-card>\n", styles: [":host{display:block;height:100%;overflow:auto;position:relative}button{margin:4px}.buttonOverlay{margin:0}mat-list{padding-top:0}:host.horizontal{max-width:100%;overflow:visible;overflow:initial}:host.horizontal mat-list{width:auto;white-space:nowrap}:host.horizontal igo-actionbar-item{display:inline-block}:host ::ng-deep .mat-list .mat-list-item .mat-list-text>*{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;max-height:36px;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host ::ng-deep .mat-list-base .mat-list-item.mat-list-item-with-avatar{height:46px}:host ::ng-deep .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content{display:-webkit-flex;height:46px;padding:3px}:host ::ng-deep .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content>mat-icon{padding:8px}igo-actionbar-item ::ng-deep mat-list-item [mat-list-avatar]{height:auto;width:40px}igo-actionbar-item ::ng-deep mat-list-item:hover{cursor:pointer}.context-menu-card{padding:8px 3px;margin:10px}#topChevron{position:-webkit-sticky;position:sticky;top:0;background-color:#fff;z-index:3}@media all and (-ms-high-contrast: none),(-ms-high-contrast: active){#topChevron{position:fixed;top:auto;top:initial}}@supports (-ms-accelerator: true){#topChevron{position:fixed;top:auto;top:initial}}#lowChevron{position:fixed;position:-webkit-sticky;position:sticky;bottom:0;background-color:#fff;z-index:3}\n"] }]
         }], function () { return [{ type: i1$5.Overlay }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.MediaService }]; }, { store: [{
                 type: Input
             }], mode: [{
@@ -4382,7 +4459,7 @@ BackdropComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BackdropC
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BackdropComponent, [{
             type: Component,
-            args: [{ selector: 'igo-backdrop', template: "<div [ngClass]=\"{'igo-backdrop-shown': shown}\"></div>\r\n", styles: [":host>div{position:absolute;top:0;bottom:0;left:0;right:0;background-color:#64646480;z-index:2;display:none}:host>div.igo-backdrop-shown{display:block}\n"] }]
+            args: [{ selector: 'igo-backdrop', template: "<div [ngClass]=\"{'igo-backdrop-shown': shown}\"></div>\n", styles: [":host>div{position:absolute;top:0;bottom:0;left:0;right:0;background-color:#64646480;z-index:2;display:none}:host>div.igo-backdrop-shown{display:block}\n"] }]
         }], function () { return []; }, { shown: [{
                 type: Input
             }] });
@@ -4765,7 +4842,7 @@ CollapsibleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Collap
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollapsibleComponent, [{
             type: Component,
-            args: [{ selector: 'igo-collapsible', template: "<mat-list-item>\r\n  <mat-icon\r\n    svgIcon=\"chevron-up\" \r\n    class=\"igo-chevron\"\r\n    mat-list-avatar\r\n    igoCollapse\r\n    [target]=\"content\"\r\n    [collapsed]=\"collapsed\"\r\n    (toggle)=\"collapsed = $event\">\r\n  </mat-icon>\r\n  <h4 matLine>{{title}}</h4>\r\n</mat-list-item>\r\n\r\n<div #content>\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [":host ::ng-deep .mat-list .mat-list-item.mat-list-avatar{height:auto;width:auto;padding:0}mat-list-item{overflow:hidden}\n"] }]
+            args: [{ selector: 'igo-collapsible', template: "<mat-list-item>\n  <mat-icon\n    svgIcon=\"chevron-up\" \n    class=\"igo-chevron\"\n    mat-list-avatar\n    igoCollapse\n    [target]=\"content\"\n    [collapsed]=\"collapsed\"\n    (toggle)=\"collapsed = $event\">\n  </mat-icon>\n  <h4 matLine>{{title}}</h4>\n</mat-list-item>\n\n<div #content>\n  <ng-content></ng-content>\n</div>\n", styles: [":host ::ng-deep .mat-list .mat-list-item.mat-list-avatar{height:auto;width:auto;padding:0}mat-list-item{overflow:hidden}\n"] }]
         }], null, { title: [{
                 type: Input
             }], collapsed: [{
@@ -4838,7 +4915,7 @@ ConfirmDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Conf
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ConfirmDialogComponent, [{
             type: Component,
-            args: [{ selector: 'igo-confirm-dialog', template: "<h2 mat-dialog-title class=\"mat-typography\">{{'igo.common.confirmDialog.title' |\u00A0translate}}</h2>\r\n<div mat-dialog-content class=\"mat-typography\">{{confirmMessage}}</div>\r\n<div mat-dialog-actions>\r\n  <button mat-button color=\"primary\" (click)=\"dialogRef.close(true)\">{{'igo.common.confirmDialog.confirmBtn' | translate}}</button>\r\n  <button mat-button (click)=\"dialogRef.close(false)\">{{'igo.common.confirmDialog.cancelBtn' |\u00A0translate}}</button>\r\n</div>\r\n", styles: ["h2{margin:5px 0 10px}div[mat-dialog-content]{max-width:200px}div[mat-dialog-actions]{margin:10px 0 0}\n"] }]
+            args: [{ selector: 'igo-confirm-dialog', template: "<h2 mat-dialog-title class=\"mat-typography\">{{'igo.common.confirmDialog.title' |\u00A0translate}}</h2>\n<div mat-dialog-content class=\"mat-typography\">{{confirmMessage}}</div>\n<div mat-dialog-actions>\n  <button mat-button color=\"primary\" (click)=\"dialogRef.close(true)\">{{'igo.common.confirmDialog.confirmBtn' | translate}}</button>\n  <button mat-button (click)=\"dialogRef.close(false)\">{{'igo.common.confirmDialog.cancelBtn' |\u00A0translate}}</button>\n</div>\n", styles: ["h2{margin:5px 0 10px}div[mat-dialog-content]{max-width:200px}div[mat-dialog-actions]{margin:10px 0 0}\n"] }]
         }], function () { return [{ type: i1$6.MatDialogRef }]; }, null);
 })();
 
@@ -4894,7 +4971,19 @@ class ContextMenuDirective {
         this.menuPosition = new EventEmitter();
     }
     onContextMenu(e) {
-        const { x, y } = e;
+        let x;
+        let y;
+        if (e instanceof TouchEvent) {
+            x = e.touches[0].pageX;
+            y = e.touches[0].pageY;
+        }
+        else if (e instanceof MouseEvent) {
+            x = e.x;
+            y = e.y;
+        }
+        if (!x || !y) {
+            return;
+        }
         this.close();
         e.preventDefault();
         this.menuPosition.emit({ x, y });
@@ -4952,7 +5041,7 @@ class ContextMenuDirective {
 ContextMenuDirective.ɵfac = function ContextMenuDirective_Factory(t) { return new (t || ContextMenuDirective)(i0.ɵɵdirectiveInject(i1$5.Overlay), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
 ContextMenuDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: ContextMenuDirective, selectors: [["", "igoContextMenu", ""]], hostBindings: function ContextMenuDirective_HostBindings(rf, ctx) {
         if (rf & 1) {
-            i0.ɵɵlistener("contextmenu", function ContextMenuDirective_contextmenu_HostBindingHandler($event) { return ctx.onContextMenu($event); });
+            i0.ɵɵlistener("longpress", function ContextMenuDirective_longpress_HostBindingHandler($event) { return ctx.onContextMenu($event); })("contextmenu", function ContextMenuDirective_contextmenu_HostBindingHandler($event) { return ctx.onContextMenu($event); });
         }
     }, inputs: { menuContext: ["igoContextMenu", "menuContext"] }, outputs: { menuPosition: "menuPosition" } });
 (function () {
@@ -4967,11 +5056,59 @@ ContextMenuDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: Contex
             }], menuPosition: [{
                 type: Output
             }], onContextMenu: [{
+                type: HostListener,
+                args: ['longpress', ['$event']]
+            }, {
                 type: HostListener,
                 args: ['contextmenu', ['$event']]
             }] });
 })();
 
+class LongPressDirective {
+    constructor() {
+        this.longpress = new EventEmitter();
+    }
+    touchstart(e) {
+        this.touchTimeout = setTimeout(() => {
+            this.longpress.emit(e);
+        }, 400);
+    }
+    touchend() {
+        this.touchEnd();
+    }
+    touchEnd() {
+        clearTimeout(this.touchTimeout);
+    }
+}
+LongPressDirective.ɵfac = function LongPressDirective_Factory(t) { return new (t || LongPressDirective)(); };
+LongPressDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: LongPressDirective, selectors: [["", "igoLongPress", ""]], hostBindings: function LongPressDirective_HostBindings(rf, ctx) {
+        if (rf & 1) {
+            i0.ɵɵlistener("touchstart", function LongPressDirective_touchstart_HostBindingHandler($event) { return ctx.touchstart($event); })("touchmove", function LongPressDirective_touchmove_HostBindingHandler() { return ctx.touchend(); })("touchcancel", function LongPressDirective_touchcancel_HostBindingHandler() { return ctx.touchend(); })("touchend", function LongPressDirective_touchend_HostBindingHandler() { return ctx.touchend(); });
+        }
+    }, outputs: { longpress: "longpress" } });
+(function () {
+    (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LongPressDirective, [{
+            type: Directive,
+            args: [{
+                    selector: '[igoLongPress]'
+                }]
+        }], function () { return []; }, { longpress: [{
+                type: Output
+            }], touchstart: [{
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }], touchend: [{
+                type: HostListener,
+                args: ['touchmove']
+            }, {
+                type: HostListener,
+                args: ['touchcancel']
+            }, {
+                type: HostListener,
+                args: ['touchend']
+            }] });
+})();
+
 class IgoContextMenuModule {
     static forRoot() {
         return {
@@ -4988,12 +5125,12 @@ IgoContextMenuModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({});
             type: NgModule,
             args: [{
                     imports: [],
-                    declarations: [ContextMenuDirective],
-                    exports: [ContextMenuDirective]
+                    declarations: [ContextMenuDirective, LongPressDirective],
+                    exports: [ContextMenuDirective, LongPressDirective]
                 }]
         }], null, null);
 })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(IgoContextMenuModule, { declarations: [ContextMenuDirective], exports: [ContextMenuDirective] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(IgoContextMenuModule, { declarations: [ContextMenuDirective, LongPressDirective], exports: [ContextMenuDirective, LongPressDirective] }); })();
 
 class CustomHtmlComponent {
     constructor() {
@@ -5019,7 +5156,7 @@ CustomHtmlComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CustomH
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CustomHtmlComponent, [{
             type: Component,
-            args: [{ selector: 'igo-custom-html', template: "<div class=\"custom-html\" [innerHTML]=\"html | sanitizeHtml\"></div>\r\n", styles: [".custom-html{padding:20px}\n"] }]
+            args: [{ selector: 'igo-custom-html', template: "<div class=\"custom-html\" [innerHTML]=\"html | sanitizeHtml\"></div>\n", styles: [".custom-html{padding:20px}\n"] }]
         }], function () { return []; }, { html: [{
                 type: Input
             }] });
@@ -5543,7 +5680,7 @@ DynamicOutletComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dyna
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DynamicOutletComponent, [{
             type: Component,
-            args: [{ selector: 'igo-dynamic-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #target></ng-template>\r\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
+            args: [{ selector: 'igo-dynamic-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #target></ng-template>\n", styles: [":host{display:block;width:100%;height:100%}\n"] }]
         }], function () { return [{ type: DynamicComponentService }, { type: i0.ChangeDetectorRef }]; }, { component: [{
                 type: Input
             }], inputs: [{
@@ -5742,7 +5879,7 @@ FlexibleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlexibleC
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FlexibleComponent, [{
             type: Component,
-            args: [{ selector: 'igo-flexible', template: "<div #flexibleMain class=\"igo-flexible-main {{state}} {{direction}}\">\r\n  <div class=\"igo-container\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>\r\n<div class=\"igo-flexible-fill\">\r\n  <div>\r\n  \t<div class=\"igo-container\">\r\n      <ng-content select=\"[igoFlexibleFill]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [":host{display:flex;height:100%;width:100%}:host.column{flex-direction:column}:host.row{flex-direction:row}.igo-flexible-main{flex:0 0 auto;overflow:hidden}.igo-flexible-main.column{transition:height .25s ease-in}.igo-flexible-main.row{transition:width .25s ease-in}.igo-flexible-fill>div{position:absolute;top:0;bottom:0;left:0;right:0}.igo-container{width:calc(100% - 10px);height:100%;padding:5px 0;margin:0 5px;overflow:hidden;position:relative}::ng-deep .igo-flexible-fill{flex:1 1 auto;overflow:hidden;position:relative}::ng-deep .igo-content{height:100%;width:100%;overflow:auto}::ng-deep igo-panel{height:100%}\n"] }]
+            args: [{ selector: 'igo-flexible', template: "<div #flexibleMain class=\"igo-flexible-main {{state}} {{direction}}\">\n  <div class=\"igo-container\">\n    <ng-content></ng-content>\n  </div>\n</div>\n<div class=\"igo-flexible-fill\">\n  <div>\n  \t<div class=\"igo-container\">\n      <ng-content select=\"[igoFlexibleFill]\"></ng-content>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:flex;height:100%;width:100%}:host.column{flex-direction:column}:host.row{flex-direction:row}.igo-flexible-main{flex:0 0 auto;overflow:hidden}.igo-flexible-main.column{transition:height .25s ease-in}.igo-flexible-main.row{transition:width .25s ease-in}.igo-flexible-fill>div{position:absolute;top:0;bottom:0;left:0;right:0}.igo-container{width:calc(100% - 10px);height:100%;padding:5px 0;margin:0 5px;overflow:hidden;position:relative}::ng-deep .igo-flexible-fill{flex:1 1 auto;overflow:hidden;position:relative}::ng-deep .igo-content{height:100%;width:100%;overflow:auto}::ng-deep igo-panel{height:100%}\n"] }]
         }], function () { return [{ type: i0.ElementRef }, { type: i1$1.MediaService }]; }, { main: [{
                 type: ViewChild,
                 args: ['flexibleMain', { static: true }]
@@ -5932,7 +6069,7 @@ FormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormComponent
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormComponent, [{
             type: Component,
-            args: [{ selector: 'igo-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n<form\r\n  [autocomplete]=\"autocomplete\"\r\n  [formGroup]=\"form.control\"\r\n  (ngSubmit)=\"onSubmit()\">\r\n  <div class=\"igo-form-body\" [ngClass]=\"{'igo-form-body-with-buttons': hasButtons}\">\r\n    <div class=\"igo-form-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <div #buttons class=\"igo-form-buttons\">\r\n      <ng-content select=\"[formButtons]\"></ng-content>\r\n    </div>\r\n  </div>\r\n</form>\r\n", styles: [":host{display:block}form{width:100%;height:100%}.igo-form-body,.igo-form-content{height:100%}.igo-form-body-with-buttons .igo-form-content{height:calc(100% - 56px)}.igo-form-content{display:flex}\n"] }]
+            args: [{ selector: 'igo-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n<form\n  [autocomplete]=\"autocomplete\"\n  [formGroup]=\"form.control\"\n  (ngSubmit)=\"onSubmit()\">\n  <div class=\"igo-form-body\" [ngClass]=\"{'igo-form-body-with-buttons': hasButtons}\">\n    <div class=\"igo-form-content\">\n      <ng-content></ng-content>\n    </div>\n    <div #buttons class=\"igo-form-buttons\">\n      <ng-content select=\"[formButtons]\"></ng-content>\n    </div>\n  </div>\n</form>\n", styles: [":host{display:block}form{width:100%;height:100%}.igo-form-body,.igo-form-content{height:100%}.igo-form-body-with-buttons .igo-form-content{height:calc(100% - 56px)}.igo-form-content{display:flex}\n"] }]
         }], function () { return []; }, { form: [{
                 type: Input
             }], formData: [{
@@ -6054,7 +6191,7 @@ class FormService {
         return Validators[name](args);
     }
 }
-FormService.ɵfac = function FormService_Factory(t) { return new (t || FormService)(i0.ɵɵinject(i1$4.FormBuilder)); };
+FormService.ɵfac = function FormService_Factory(t) { return new (t || FormService)(i0.ɵɵinject(i1$4.UntypedFormBuilder)); };
 FormService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: FormService, factory: FormService.ɵfac, providedIn: 'root' });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormService, [{
@@ -6062,7 +6199,7 @@ FormService.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: FormService,
             args: [{
                     providedIn: 'root'
                 }]
-        }], function () { return [{ type: i1$4.FormBuilder }]; }, null);
+        }], function () { return [{ type: i1$4.UntypedFormBuilder }]; }, null);
 })();
 
 /**
@@ -6168,7 +6305,7 @@ FormFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormFiel
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormFieldComponent, [{
             type: Component,
-            args: [{ selector: 'igo-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "\r\n\r\n<ng-container *ngIf=\"field !== undefined\">\r\n  <igo-dynamic-outlet\r\n    [component]=\"getFieldComponent()\"\r\n    [inputs]=\"getFieldInputs()\"\r\n    [subscribers]=\"getFieldSubscribers()\">\r\n  </igo-dynamic-outlet>\r\n</ng-container>\r\n", styles: ["::ng-deep mat-form-field{width:100%}::ng-deep .igo-form-disable-switch{margin-right:8px}\n"] }]
+            args: [{ selector: 'igo-form-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "\n\n<ng-container *ngIf=\"field !== undefined\">\n  <igo-dynamic-outlet\n    [component]=\"getFieldComponent()\"\n    [inputs]=\"getFieldInputs()\"\n    [subscribers]=\"getFieldSubscribers()\">\n  </igo-dynamic-outlet>\n</ng-container>\n", styles: ["::ng-deep mat-form-field{width:100%}::ng-deep .igo-form-disable-switch{margin-right:8px}\n"] }]
         }], function () { return [{ type: FormFieldService }]; }, { field: [{
                 type: Input
             }] });
@@ -6287,7 +6424,7 @@ FormFieldSelectComponent = __decorate([
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormFieldSelectComponent, [{
             type: Component,
-            args: [{ selector: 'igo-form-field-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field>\r\n  <mat-select\r\n    [required]=\"required\"\r\n    [placeholder]=\"placeholder\"\r\n    [formControl]=\"formControl\">\r\n    <mat-option *ngFor=\"let choice of choices$ | async\" [value]=\"choice.value\">\r\n      {{choice.title}}\r\n    </mat-option>\r\n  </mat-select>\r\n  <mat-icon\r\n    *ngIf=\"disableSwitch === true\"\r\n    class=\"igo-form-disable-switch\"\r\n    [svgIcon]=\"(disabled$ | async) === true ? 'checkbox-blank-outline' : 'checkbox-marked-outline'\"\r\n    (click)=\"onDisableSwitchClick()\"\r\n    matPrefix>\r\n  </mat-icon>\r\n  <mat-error *ngIf=\"formControl.errors\">{{getErrorMessage() | translate}}</mat-error>\r\n</mat-form-field>\r\n" }]
+            args: [{ selector: 'igo-form-field-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field>\n  <mat-select\n    [required]=\"required\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"formControl\">\n    <mat-option *ngFor=\"let choice of choices$ | async\" [value]=\"choice.value\">\n      {{choice.title}}\n    </mat-option>\n  </mat-select>\n  <mat-icon\n    *ngIf=\"disableSwitch === true\"\n    class=\"igo-form-disable-switch\"\n    [svgIcon]=\"(disabled$ | async) === true ? 'checkbox-blank-outline' : 'checkbox-marked-outline'\"\n    (click)=\"onDisableSwitchClick()\"\n    matPrefix>\n  </mat-icon>\n  <mat-error *ngIf=\"formControl.errors\">{{getErrorMessage() | translate}}</mat-error>\n</mat-form-field>\n" }]
         }], null, { choices: [{
                 type: Input
             }], formControl: [{
@@ -6391,7 +6528,7 @@ FormFieldTextComponent = __decorate([
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormFieldTextComponent, [{
             type: Component,
-            args: [{ selector: 'igo-form-field-text', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field>\r\n  <input\r\n    matInput\r\n    [required]=\"required\"\r\n    [placeholder]=\"placeholder\"\r\n    [formControl]=\"formControl\">\r\n  <mat-icon\r\n    *ngIf=\"disableSwitch === true\"\r\n    class=\"igo-form-disable-switch\"\r\n    [svgIcon]=\"(disabled$ | async) === true ? 'checkbox-blank-outline' : 'checkbox-marked-outline'\"\r\n    (click)=\"onDisableSwitchClick()\"\r\n    matPrefix>\r\n  </mat-icon>\r\n  <mat-error *ngIf=\"formControl.errors\">{{getErrorMessage() | translate}}</mat-error>\r\n</mat-form-field>\r\n" }]
+            args: [{ selector: 'igo-form-field-text', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field>\n  <input\n    matInput\n    [required]=\"required\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"formControl\">\n  <mat-icon\n    *ngIf=\"disableSwitch === true\"\n    class=\"igo-form-disable-switch\"\n    [svgIcon]=\"(disabled$ | async) === true ? 'checkbox-blank-outline' : 'checkbox-marked-outline'\"\n    (click)=\"onDisableSwitchClick()\"\n    matPrefix>\n  </mat-icon>\n  <mat-error *ngIf=\"formControl.errors\">{{getErrorMessage() | translate}}</mat-error>\n</mat-form-field>\n" }]
         }], null, { formControl: [{
                 type: Input
             }], placeholder: [{
@@ -6494,7 +6631,7 @@ FormFieldTextareaComponent = __decorate([
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormFieldTextareaComponent, [{
             type: Component,
-            args: [{ selector: 'igo-form-field-textarea', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field>\r\n  <textarea\r\n    matInput\r\n    [required]=\"required\"\r\n    [placeholder]=\"placeholder\"\r\n    [formControl]=\"formControl\">\r\n  </textarea>\r\n  <mat-icon\r\n    *ngIf=\"disableSwitch === true\"\r\n    class=\"igo-form-disable-switch\"\r\n    [svgIcon]=\"(disabled$ | async) === true ? 'checkbox-blank-outline' : 'checkbox-marked-outline'\"\r\n    (click)=\"onDisableSwitchClick()\"\r\n    matPrefix>\r\n  </mat-icon>\r\n  <mat-error *ngIf=\"formControl.errors\">{{getErrorMessage() | translate}}</mat-error>\r\n</mat-form-field>\r\n" }]
+            args: [{ selector: 'igo-form-field-textarea', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field>\n  <textarea\n    matInput\n    [required]=\"required\"\n    [placeholder]=\"placeholder\"\n    [formControl]=\"formControl\">\n  </textarea>\n  <mat-icon\n    *ngIf=\"disableSwitch === true\"\n    class=\"igo-form-disable-switch\"\n    [svgIcon]=\"(disabled$ | async) === true ? 'checkbox-blank-outline' : 'checkbox-marked-outline'\"\n    (click)=\"onDisableSwitchClick()\"\n    matPrefix>\n  </mat-icon>\n  <mat-error *ngIf=\"formControl.errors\">{{getErrorMessage() | translate}}</mat-error>\n</mat-form-field>\n" }]
         }], null, { formControl: [{
                 type: Input
             }], placeholder: [{
@@ -6674,7 +6811,7 @@ FormGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormGrou
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormGroupComponent, [{
             type: Component,
-            args: [{ selector: 'igo-form-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  *ngIf=\"group && group.fields.length > 0\"\r\n  class=\"igo-form-group-fields\">\r\n  <div\r\n    *ngFor=\"let field of group.fields\"\r\n    class=\"igo-form-field-wrapper\"\r\n    [ngClass]=\"getFieldNgClass(field)\">\r\n    <igo-form-field [field]=\"field\"></igo-form-field>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"igo-form-group-extra-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n\r\n<mat-error *ngIf=\"formControl.errors\">{{getErrorMessage() | translate}}</mat-error>\r\n", styles: [":host{width:100%;height:100%;display:block;overflow:auto;padding:10px 5px}.igo-form-field-wrapper{display:inline-block;padding:0 5px}.igo-form-field-colspan-2{width:100%}.igo-form-field-colspan-1{width:50%}\n"] }]
+            args: [{ selector: 'igo-form-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"group && group.fields.length > 0\"\n  class=\"igo-form-group-fields\">\n  <div\n    *ngFor=\"let field of group.fields\"\n    class=\"igo-form-field-wrapper\"\n    [ngClass]=\"getFieldNgClass(field)\">\n    <igo-form-field [field]=\"field\"></igo-form-field>\n  </div>\n</div>\n\n<div class=\"igo-form-group-extra-content\">\n  <ng-content></ng-content>\n</div>\n\n<mat-error *ngIf=\"formControl.errors\">{{getErrorMessage() | translate}}</mat-error>\n", styles: [":host{width:100%;height:100%;display:block;overflow:auto;padding:10px 5px}.igo-form-field-wrapper{display:inline-block;padding:0 5px}.igo-form-field-colspan-2{width:100%}.igo-form-field-colspan-1{width:50%}\n"] }]
         }], function () { return []; }, { group: [{
                 type: Input
             }], errors: [{
@@ -6788,7 +6925,7 @@ HomeButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HomeBut
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(HomeButtonComponent, [{
             type: Component,
-            args: [{ selector: 'igo-home-button', template: "<button\r\n    id=\"homeButton\"\r\n    mat-icon-button\r\n    tooltip-position=\"below\"\r\n    matTooltipShowDelay=\"500\"\r\n    [matTooltip]=\"'igo.context.sidenav.mainMenu' | translate\"\r\n    (click)=\"onUnselectButtonClick()\">\r\n    <mat-icon svgIcon=\"home\"></mat-icon>\r\n</button>\r\n", styles: ["#homeButton{position:absolute;top:50px;left:0px;border-radius:0;height:46px;width:48px}\n"] }]
+            args: [{ selector: 'igo-home-button', template: "<button\n    id=\"homeButton\"\n    mat-icon-button\n    tooltip-position=\"below\"\n    matTooltipShowDelay=\"500\"\n    [matTooltip]=\"'igo.context.sidenav.mainMenu' | translate\"\n    (click)=\"onUnselectButtonClick()\">\n    <mat-icon svgIcon=\"home\"></mat-icon>\n</button>\n", styles: ["#homeButton{position:absolute;top:50px;left:0px;border-radius:0;height:46px;width:48px}\n"] }]
         }], function () { return []; }, { unselectButton: [{
                 type: Output
             }] });
@@ -6950,12 +7087,12 @@ IgoImageModule.ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({});
             type: NgModule,
             args: [{
                     imports: [],
-                    declarations: [SecureImagePipe],
-                    exports: [SecureImagePipe]
+                    declarations: [SecureImagePipe, ImageErrorDirective],
+                    exports: [SecureImagePipe, ImageErrorDirective]
                 }]
         }], null, null);
 })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(IgoImageModule, { declarations: [SecureImagePipe], exports: [SecureImagePipe] }); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(IgoImageModule, { declarations: [SecureImagePipe, ImageErrorDirective], exports: [SecureImagePipe, ImageErrorDirective] }); })();
 
 /**
  * @ignore
@@ -7735,7 +7872,7 @@ InteractiveTourComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: In
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(InteractiveTourComponent, [{
             type: Component,
-            args: [{ selector: 'igo-interactive-tour', encapsulation: ViewEncapsulation.None, template: "<button *ngIf=\"showTourButton\"\r\n  (click) = \"startInteractiveTour()\"\r\n  [ngClass]=\"getClass()\"\r\n  mat-raised-button\r\n  tooltip-position=\"below\"\r\n  matTooltipShowDelay=\"500\"\r\n  [disabled]=disabledTourButton>\r\n  <span class=\"interactive-tour-button-title\">{{'igo.common.interactiveTour.buttonTitle' | translate}} {{(discoverTitleInLocale$ | async) | translate}}</span>\r\n  <mat-icon\r\n    svgIcon=\"presentation-play\"\r\n    [matTooltip]=\"disabledTourButton ?\r\n    ('igo.common.interactiveTour.disaledTooltipTourToolButton' | translate) :\r\n    ('igo.common.interactiveTour.tooltipTourToolButton' | translate)\">\r\n  </mat-icon>\r\n</button>\r\n", styles: [".shepherd-has-title .shepherd-content .shepherd-header{padding:.5em .75em}.shepherd-title{margin:0!important;font-weight:revert!important}.shepherd-progress{margin-right:15px;color:#737373}.shepherd-text{font-size:14px!important}.shepherd-element{border:1px solid;border-color:#474747;box-shadow:4px 5px #65656599}\n"] }]
+            args: [{ selector: 'igo-interactive-tour', encapsulation: ViewEncapsulation.None, template: "<button *ngIf=\"showTourButton\"\n  (click) = \"startInteractiveTour()\"\n  [ngClass]=\"getClass()\"\n  mat-raised-button\n  tooltip-position=\"below\"\n  matTooltipShowDelay=\"500\"\n  [disabled]=disabledTourButton>\n  <span class=\"interactive-tour-button-title\">{{'igo.common.interactiveTour.buttonTitle' | translate}} {{(discoverTitleInLocale$ | async) | translate}}</span>\n  <mat-icon\n    svgIcon=\"presentation-play\"\n    [matTooltip]=\"disabledTourButton ?\n    ('igo.common.interactiveTour.disaledTooltipTourToolButton' | translate) :\n    ('igo.common.interactiveTour.tooltipTourToolButton' | translate)\">\n  </mat-icon>\n</button>\n", styles: [".shepherd-has-title .shepherd-content .shepherd-header{padding:.5em .75em}.shepherd-title{margin:0!important;font-weight:revert!important}.shepherd-progress{margin-right:15px;color:#737373}.shepherd-text{font-size:14px!important}.shepherd-element{border:1px solid;border-color:#474747;box-shadow:4px 5px #65656599}\n"] }]
         }], function () { return [{ type: InteractiveTourService }, { type: ToolService }]; }, { tourToStart: [{
                 type: Input
             }], styleButton: [{
@@ -7943,7 +8080,7 @@ JsonDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: JsonDia
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JsonDialogComponent, [{
             type: Component,
-            args: [{ selector: 'igo-json-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{ title }}</h1>\r\n\r\n<div mat-dialog-content class=\"mat-typography\">\r\n  <ng-container *ngTemplateOutlet=\"loopObject;context:{ obj: data }\"></ng-container>\r\n\r\n  <ng-template #loopObject let-obj='obj' let-baseKey='baseKey'>\r\n    <ng-container *ngFor=\"let property of obj | keyvalue\">\r\n      <ng-container *ngIf=\"ignoreKeys.indexOf(getKey(baseKey, property.key)) === -1\">\r\n\r\n        <ng-container *ngIf=\"isObject(property.value); else notObject\">\r\n          <ng-container *ngTemplateOutlet=\"loopObject;context:{ obj: property.value, baseKey: getKey(baseKey, property.key) }\"></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #notObject>\r\n          <p><span><b>{{getKey(baseKey, property.key)}}</b> : </span><span class=\"propertyValue\" [innerHtml]=\"property.value\"></span></p>\r\n        </ng-template>\r\n\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-template>\r\n</div>\r\n\r\n<div mat-dialog-actions>\r\n  <button mat-button color=\"primary\"\r\n          (click)=\"dialogRef.close(false)\">\r\n    OK\r\n  </button>\r\n</div>\r\n" }]
+            args: [{ selector: 'igo-json-dialog', template: "<h1 mat-dialog-title class=\"mat-typography\">{{ title }}</h1>\n\n<div mat-dialog-content class=\"mat-typography\">\n  <ng-container *ngTemplateOutlet=\"loopObject;context:{ obj: data }\"></ng-container>\n\n  <ng-template #loopObject let-obj='obj' let-baseKey='baseKey'>\n    <ng-container *ngFor=\"let property of obj | keyvalue\">\n      <ng-container *ngIf=\"ignoreKeys.indexOf(getKey(baseKey, property.key)) === -1\">\n\n        <ng-container *ngIf=\"isObject(property.value); else notObject\">\n          <ng-container *ngTemplateOutlet=\"loopObject;context:{ obj: property.value, baseKey: getKey(baseKey, property.key) }\"></ng-container>\n        </ng-container>\n\n        <ng-template #notObject>\n          <p><span><b>{{getKey(baseKey, property.key)}}</b> : </span><span class=\"propertyValue\" [innerHtml]=\"property.value\"></span></p>\n        </ng-template>\n\n      </ng-container>\n    </ng-container>\n  </ng-template>\n</div>\n\n<div mat-dialog-actions>\n  <button mat-button color=\"primary\"\n          (click)=\"dialogRef.close(false)\">\n    OK\n  </button>\n</div>\n" }]
         }], function () { return [{ type: i1$6.MatDialogRef }]; }, null);
 })();
 
@@ -8404,11 +8541,11 @@ ListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListComponent
         if (rf & 2) {
             i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(1, _c0$4, ctx.selection));
         }
-    }, dependencies: [i1.NgClass, i2$3.MatList, ClickoutDirective], styles: ["[_nghost-%COMP%]{display:block;height:100%;overflow:auto;position:relative}mat-list[_ngcontent-%COMP%]{padding-top:0}[_nghost-%COMP%]{position:static}[_nghost-%COMP%]     .mat-list .mat-list-item .mat-list-text>*{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;max-height:36px;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}[_nghost-%COMP%]     .mat-list .mat-list-item.mat-list-item-avatar .mat-list-item-content{display:-webkit-flex;height:46px;padding:3px}[_nghost-%COMP%]     .mat-list .mat-list-item.mat-list-item-avatar{height:46px}[_nghost-%COMP%]     .mat-list   igo-collapsible>.mat-list-item>.mat-list-item-content>.mat-list-text>.mat-line{font-weight:700;opacity:.9}[_nghost-%COMP%]     .mat-list .mat-list-item.mat-list-item-avatar .mat-list-item-content>mat-icon{padding:8px}[_nghost-%COMP%]     [igolistitem] mat-list-item [mat-list-avatar]{height:auto;width:40px}[_nghost-%COMP%]   mat-list.selectable[_ngcontent-%COMP%]     [igolistitem]:not(.igo-list-item-disabled) mat-list-item:hover{cursor:pointer}[_nghost-%COMP%]     [igolistitem]:focus{outline:none}"] });
+    }, dependencies: [i1.NgClass, i2$3.MatList, ClickoutDirective], styles: ["[_nghost-%COMP%]{display:block;height:100%;overflow:auto;position:relative}mat-list[_ngcontent-%COMP%]{padding-top:0}[_nghost-%COMP%]{position:static}[_nghost-%COMP%]     .mat-list .mat-list-item .mat-list-text>*{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;max-height:36px;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}[_nghost-%COMP%]     .mat-list .mat-list-item.mat-list-item-with-avatar .mat-list-item-content{display:-webkit-flex;height:46px;padding:3px}[_nghost-%COMP%]     .mat-list .mat-list-item.mat-list-item-with-avatar{height:46px}[_nghost-%COMP%]     .mat-list   igo-collapsible>.mat-list-item>.mat-list-item-content>.mat-list-text>.mat-line{font-weight:700;opacity:.9}[_nghost-%COMP%]     .mat-list .mat-list-item.mat-list-item-with-avatar .mat-list-item-content>mat-icon{padding:8px}[_nghost-%COMP%]     [igolistitem] mat-list-item [mat-list-avatar]{height:auto;width:40px}[_nghost-%COMP%]   mat-list.selectable[_ngcontent-%COMP%]     [igolistitem]:not(.igo-list-item-disabled) mat-list-item:hover{cursor:pointer}[_nghost-%COMP%]     [igolistitem]:focus{outline:none}"] });
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListComponent, [{
             type: Component,
-            args: [{ selector: 'igo-list', template: "<mat-list\r\n  igoClickout\r\n  [ngClass]=\"{'selectable': selection}\"\r\n  (clickout)=\"disableNavigation()\"\r\n  (click)=\"enableNavigation()\">\r\n  <ng-content></ng-content>\r\n</mat-list>\r\n", styles: [":host{display:block;height:100%;overflow:auto;position:relative}mat-list{padding-top:0}:host{position:static}:host ::ng-deep .mat-list .mat-list-item .mat-list-text>*{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;max-height:36px;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host ::ng-deep .mat-list .mat-list-item.mat-list-item-avatar .mat-list-item-content{display:-webkit-flex;height:46px;padding:3px}:host ::ng-deep .mat-list .mat-list-item.mat-list-item-avatar{height:46px}:host ::ng-deep .mat-list ::ng-deep igo-collapsible>.mat-list-item>.mat-list-item-content>.mat-list-text>.mat-line{font-weight:700;opacity:.9}:host ::ng-deep .mat-list .mat-list-item.mat-list-item-avatar .mat-list-item-content>mat-icon{padding:8px}:host ::ng-deep [igolistitem] mat-list-item [mat-list-avatar]{height:auto;width:40px}:host mat-list.selectable ::ng-deep [igolistitem]:not(.igo-list-item-disabled) mat-list-item:hover{cursor:pointer}:host ::ng-deep [igolistitem]:focus{outline:none}\n"] }]
+            args: [{ selector: 'igo-list', template: "<mat-list\n  igoClickout\n  [ngClass]=\"{'selectable': selection}\"\n  (clickout)=\"disableNavigation()\"\n  (click)=\"enableNavigation()\">\n  <ng-content></ng-content>\n</mat-list>\n", styles: [":host{display:block;height:100%;overflow:auto;position:relative}mat-list{padding-top:0}:host{position:static}:host ::ng-deep .mat-list .mat-list-item .mat-list-text>*{white-space:normal;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;max-height:36px;line-height:18px;-webkit-box-orient:vertical;-webkit-line-clamp:2}:host ::ng-deep .mat-list .mat-list-item.mat-list-item-with-avatar .mat-list-item-content{display:-webkit-flex;height:46px;padding:3px}:host ::ng-deep .mat-list .mat-list-item.mat-list-item-with-avatar{height:46px}:host ::ng-deep .mat-list ::ng-deep igo-collapsible>.mat-list-item>.mat-list-item-content>.mat-list-text>.mat-line{font-weight:700;opacity:.9}:host ::ng-deep .mat-list .mat-list-item.mat-list-item-with-avatar .mat-list-item-content>mat-icon{padding:8px}:host ::ng-deep [igolistitem] mat-list-item [mat-list-avatar]{height:auto;width:40px}:host mat-list.selectable ::ng-deep [igolistitem]:not(.igo-list-item-disabled) mat-list-item:hover{cursor:pointer}:host ::ng-deep [igolistitem]:focus{outline:none}\n"] }]
         }], function () { return [{ type: i0.ElementRef }]; }, { navigation: [{
                 type: Input
             }], selection: [{
@@ -8504,7 +8641,7 @@ PanelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PanelCompone
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PanelComponent, [{
             type: Component,
-            args: [{ selector: 'igo-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"withHeader\" class=\"igo-panel-header mat-typography\" title=\"\">\r\n  <h3>\r\n    <ng-content select=\"[panelLeftButton]\"></ng-content>\r\n    <div class=\"igo-panel-title\">\r\n      {{ title }}\r\n      <ng-content select=\"[panelHeader]\"></ng-content>\r\n    </div>\r\n    <ng-content select=\"[panelRightButton]\"></ng-content>\r\n  </h3>\r\n</div>\r\n<div class=\"igo-panel-content\" title=\"\">\r\n  <ng-content></ng-content>\r\n</div>\r\n", styles: [":host{display:block}.igo-panel-header{height:46px;padding:3px;text-align:center}.igo-panel-header h3{margin:0;height:40px}.igo-panel-header ::ng-deep [panelleftbutton]{float:left;margin-right:-40px}.igo-panel-header ::ng-deep [panelrightbutton]{float:right}.igo-panel-content{overflow:auto}:host.igo-panel-with-header .igo-panel-content{height:calc(100% - 46px)}:host:not(.igo-panel-with-header) .igo-panel-content{height:100%}.igo-panel-title{display:block;width:calc(100% - 80px);margin-left:40px;height:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;line-height:40px;float:left;font-weight:700;font-size:1.17em}\n"] }]
+            args: [{ selector: 'igo-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"withHeader\" class=\"igo-panel-header mat-typography\" title=\"\">\n  <h3>\n    <ng-content select=\"[panelLeftButton]\"></ng-content>\n    <div class=\"igo-panel-title\">\n      {{ title }}\n      <ng-content select=\"[panelHeader]\"></ng-content>\n    </div>\n    <ng-content select=\"[panelRightButton]\"></ng-content>\n  </h3>\n</div>\n<div class=\"igo-panel-content\" title=\"\">\n  <ng-content></ng-content>\n</div>\n", styles: [":host{display:block}.igo-panel-header{height:46px;padding:3px;text-align:center}.igo-panel-header h3{margin:0;height:40px}.igo-panel-header ::ng-deep [panelleftbutton]{float:left;margin-right:-40px}.igo-panel-header ::ng-deep [panelrightbutton]{float:right}.igo-panel-content{overflow:auto}:host.igo-panel-with-header .igo-panel-content{height:calc(100% - 46px)}:host:not(.igo-panel-with-header) .igo-panel-content{height:100%}.igo-panel-title{display:block;width:calc(100% - 80px);margin-left:40px;height:100%;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;line-height:40px;float:left;font-weight:700;font-size:1.17em}\n"] }]
         }], null, { title: [{
                 type: Input
             }], withHeader: [{
@@ -8642,7 +8779,7 @@ SpinnerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SpinnerCom
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SpinnerComponent, [{
             type: Component,
-            args: [{ selector: 'igo-spinner', template: "<div\r\n  [ngClass]=\"{'igo-spinner-container': true, 'igo-spinner-shown': (shown$ | async)}\">\r\n  <div class=\"igo-spinner-background\"></div>\r\n  <mat-progress-spinner diameter=\"40\" mode=\"indeterminate\"></mat-progress-spinner>\r\n</div>\r\n", styles: [".igo-spinner-container{display:none;pointer-events:none}.igo-spinner-container.igo-spinner-shown{display:block}mat-progress-spinner{height:40px;width:40px;border-radius:50%}.igo-spinner-background{height:36px;width:36px;border-radius:50%;border:4px solid #ffffff;position:absolute;top:2px;left:2px}\n"] }]
+            args: [{ selector: 'igo-spinner', template: "<div\n  [ngClass]=\"{'igo-spinner-container': true, 'igo-spinner-shown': (shown$ | async)}\">\n  <div class=\"igo-spinner-background\"></div>\n  <mat-progress-spinner diameter=\"40\" mode=\"indeterminate\"></mat-progress-spinner>\n</div>\n", styles: [".igo-spinner-container{display:none;pointer-events:none}.igo-spinner-container.igo-spinner-shown{display:block}mat-progress-spinner{height:40px;width:40px;border-radius:50%}.igo-spinner-background{height:36px;width:36px;border-radius:50%;border:4px solid #ffffff;position:absolute;top:2px;left:2px}\n"] }]
         }], function () { return []; }, { shown: [{
                 type: Input
             }] });
@@ -9089,7 +9226,7 @@ TableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TableCompone
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableComponent, [{
             type: Component,
-            args: [{ selector: 'igo-table', template: "<div class='table-box'>\r\n  <div class='table-header' *ngIf=\"hasFilterInput\">\r\n    <mat-form-field floatPlaceholder='never'>\r\n      <input matInput #filter [placeholder]=\"'igo.common.table.filter' | translate\">\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <div class='table-container'>\r\n    <table mat-table #table [dataSource]='dataSource' matSort>\r\n\r\n      <!-- Checkbox Column -->\r\n      <ng-container matColumnDef=\"selectionCheckbox\">\r\n        <th mat-header-cell *matHeaderCellDef>\r\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\"\r\n                        [checked]=\"selection.hasValue() && isAllSelected()\"\r\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\r\n          </mat-checkbox>\r\n        </th>\r\n        <td mat-cell *matCellDef=\"let row\">\r\n          <mat-checkbox (click)=\"$event.stopPropagation()\"\r\n                        (change)=\"$event ? selection.toggle(row) : null\"\r\n                        [checked]=\"selection.isSelected(row)\">\r\n          </mat-checkbox>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <ng-container [matColumnDef]='column.name' *ngFor='let column of model.columns'>\r\n        <ng-container *ngIf='column.sortable'>\r\n          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column.title}} </th>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf='!column.sortable'>\r\n          <th mat-header-cell *matHeaderCellDef> {{column.title}} </th>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"!column.html; else cellHTML\">\r\n          <td mat-cell *matCellDef='let row' class=\"mat-cell-text\"\r\n            [ngClass]=\"model.cellClassFunc ? model.cellClassFunc(row, column) : {}\">\r\n            {{getValue(row, column.name)}}\r\n          </td>\r\n        </ng-container>\r\n\r\n        <ng-template #cellHTML>\r\n          <td mat-cell *matCellDef='let row' class=\"mat-cell-text\"\r\n            [ngClass]=\"model.cellClassFunc ? model.cellClassFunc(row, column) : {}\"\r\n            [innerHTML]=\"getValue(row, column.name)\">\r\n          </td>\r\n        </ng-template>\r\n      </ng-container>\r\n\r\n      <!-- Action Column -->\r\n      <ng-container matColumnDef='action'>\r\n        <th mat-header-cell *matHeaderCellDef></th>\r\n        <td mat-cell *matCellDef='let row'>\r\n          <button *ngFor='let action of model.actions'\r\n          mat-mini-fab\r\n          [color]='getActionColor(action.color)'\r\n          (click)='handleClickAction($event, action, row)'>\r\n            <mat-icon svgIcon=\"{{action.icon}}\"></mat-icon>\r\n          </button>\r\n        </td>\r\n      </ng-container>\r\n\r\n      <tr mat-header-row *matHeaderRowDef='displayedColumns;'></tr>\r\n      <tr mat-row\r\n        *matRowDef='let row; columns: displayedColumns;'\r\n        [ngClass]=\"model.rowClassFunc ? model.rowClassFunc(row) : {}\"\r\n        (click)=\"selection.toggle(row)\">\r\n      </tr>\r\n\r\n    </table>\r\n  </div>\r\n\r\n</div>\r\n", styles: [":host{width:100%;height:100%;display:block}.table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}.table-box{height:100%;display:flex;flex-direction:column}.table-header{min-height:64px;max-width:500px;display:flex;flex:0 1 auto;align-items:baseline;padding:8px 24px 0;font-size:20px;justify-content:space-between}tr[mat-header-row],tr[mat-row]{height:60px}.mat-cell-text{overflow:hidden;word-wrap:break-word}td[mat-cell]{padding-right:15px}th.mat-header-cell{padding-right:5px}button{margin-right:10px}\n"] }]
+            args: [{ selector: 'igo-table', template: "<div class='table-box'>\n  <div class='table-header' *ngIf=\"hasFilterInput\">\n    <mat-form-field floatPlaceholder='never'>\n      <input matInput #filter [placeholder]=\"'igo.common.table.filter' | translate\">\n    </mat-form-field>\n  </div>\n\n  <div class='table-container'>\n    <table mat-table #table [dataSource]='dataSource' matSort>\n\n      <!-- Checkbox Column -->\n      <ng-container matColumnDef=\"selectionCheckbox\">\n        <th mat-header-cell *matHeaderCellDef>\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\"\n                        [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\"\n                        (change)=\"$event ? selection.toggle(row) : null\"\n                        [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <ng-container [matColumnDef]='column.name' *ngFor='let column of model.columns'>\n        <ng-container *ngIf='column.sortable'>\n          <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column.title}} </th>\n        </ng-container>\n\n        <ng-container *ngIf='!column.sortable'>\n          <th mat-header-cell *matHeaderCellDef> {{column.title}} </th>\n        </ng-container>\n\n        <ng-container *ngIf=\"!column.html; else cellHTML\">\n          <td mat-cell *matCellDef='let row' class=\"mat-cell-text\"\n            [ngClass]=\"model.cellClassFunc ? model.cellClassFunc(row, column) : {}\">\n            {{getValue(row, column.name)}}\n          </td>\n        </ng-container>\n\n        <ng-template #cellHTML>\n          <td mat-cell *matCellDef='let row' class=\"mat-cell-text\"\n            [ngClass]=\"model.cellClassFunc ? model.cellClassFunc(row, column) : {}\"\n            [innerHTML]=\"getValue(row, column.name)\">\n          </td>\n        </ng-template>\n      </ng-container>\n\n      <!-- Action Column -->\n      <ng-container matColumnDef='action'>\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef='let row'>\n          <button *ngFor='let action of model.actions'\n          mat-mini-fab\n          [color]='getActionColor(action.color)'\n          (click)='handleClickAction($event, action, row)'>\n            <mat-icon svgIcon=\"{{action.icon}}\"></mat-icon>\n          </button>\n        </td>\n      </ng-container>\n\n      <tr mat-header-row *matHeaderRowDef='displayedColumns;'></tr>\n      <tr mat-row\n        *matRowDef='let row; columns: displayedColumns;'\n        [ngClass]=\"model.rowClassFunc ? model.rowClassFunc(row) : {}\"\n        (click)=\"selection.toggle(row)\">\n      </tr>\n\n    </table>\n  </div>\n\n</div>\n", styles: [":host{width:100%;height:100%;display:block}.table-container{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}.table-box{height:100%;display:flex;flex-direction:column}.table-header{min-height:64px;max-width:500px;display:flex;flex:0 1 auto;align-items:baseline;padding:8px 24px 0;font-size:20px;justify-content:space-between}tr[mat-header-row],tr[mat-row]{height:60px}.mat-cell-text{overflow:hidden;word-wrap:break-word}td[mat-cell]{padding-right:15px}th.mat-header-cell{padding-right:5px}button{margin-right:10px}\n"] }]
         }], null, { database: [{
                 type: Input
             }], model: [{
@@ -9429,7 +9566,7 @@ ToolboxComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ToolboxCom
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ToolboxComponent, [{
             type: Component,
-            args: [{ selector: 'igo-toolbox', animations: [toolSlideInOut()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-actionbar\r\n  *ngIf=\"(toolbar$ | async).length > 0\"\r\n  [store]=\"actionStore\"\r\n  [withIcon]=\"true\"\r\n  [withTitle]=\"toolbarWithTitle$ | async\"\r\n  [withTooltip]=\"(toolbarWithTitle$ | async) === false\"\r\n  [scrollActive]=\"toolbarWithTitle$ | async\"\r\n  [horizontal]=\"false\">\r\n</igo-actionbar>\r\n\r\n<div\r\n  *ngIf=\"activeTool$ | async as tool\"\r\n  class=\"igo-tool-container\"\r\n  [ngClass]=\"{'igo-tool-container-with-toolbar': !actionStore.empty, 'igo-tool-container-with-animation': animate}\"\r\n  [@toolSlideInOut]=\"animation$ | async\"\r\n  (@toolSlideInOut.start)=\"onAnimationStart()\"\r\n  (@toolSlideInOut.done)=\"onAnimationComplete()\">\r\n\r\n  <igo-dynamic-outlet\r\n    [component]=\"tool.component\"\r\n    [inputs]=\"getToolInputs(tool)\">\r\n  </igo-dynamic-outlet>\r\n\r\n</div>\r\n", styles: [":host{display:block;position:relative;overflow:hidden;width:100%;height:100%}.igo-tool-container{position:absolute;top:0;bottom:0;left:0;right:0}.igo-tool-container-with-animation{transform:translate3d(100%,0,0)}.igo-tool-container-with-toolbar{left:50px}igo-actionbar{height:100%}igo-actionbar.with-title{width:100%;overflow:auto}igo-actionbar:not(.with-title){width:48px;overflow:hidden;-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){igo-actionbar:not(.with-title){overflow:auto}}igo-dynamic-outlet{overflow:auto}\n"] }]
+            args: [{ selector: 'igo-toolbox', animations: [toolSlideInOut()], changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-actionbar\n  *ngIf=\"(toolbar$ | async).length > 0\"\n  [store]=\"actionStore\"\n  [withIcon]=\"true\"\n  [withTitle]=\"toolbarWithTitle$ | async\"\n  [withTooltip]=\"(toolbarWithTitle$ | async) === false\"\n  [scrollActive]=\"toolbarWithTitle$ | async\"\n  [horizontal]=\"false\">\n</igo-actionbar>\n\n<div\n  *ngIf=\"activeTool$ | async as tool\"\n  class=\"igo-tool-container\"\n  [ngClass]=\"{'igo-tool-container-with-toolbar': !actionStore.empty, 'igo-tool-container-with-animation': animate}\"\n  [@toolSlideInOut]=\"animation$ | async\"\n  (@toolSlideInOut.start)=\"onAnimationStart()\"\n  (@toolSlideInOut.done)=\"onAnimationComplete()\">\n\n  <igo-dynamic-outlet\n    [component]=\"tool.component\"\n    [inputs]=\"getToolInputs(tool)\">\n  </igo-dynamic-outlet>\n\n</div>\n", styles: [":host{display:block;position:relative;overflow:hidden;width:100%;height:100%}.igo-tool-container{position:absolute;top:0;bottom:0;left:0;right:0}.igo-tool-container-with-animation{transform:translate3d(100%,0,0)}.igo-tool-container-with-toolbar{left:50px}igo-actionbar{height:100%}igo-actionbar.with-title{width:100%;overflow:auto}igo-actionbar:not(.with-title){width:48px;overflow:hidden;-o-box-shadow:2px 0px 2px 0px #dddddd;box-shadow:2px 0 2px #ddd}@media only screen and (orientation:portrait) and (max-width: 599px),only screen and (orientation:landscape) and (max-width: 959px){igo-actionbar:not(.with-title){overflow:auto}}igo-dynamic-outlet{overflow:auto}\n"] }]
         }], null, { toolbox: [{
                 type: Input
             }], animate: [{
@@ -9614,7 +9751,7 @@ WidgetOutletComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Widge
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WidgetOutletComponent, [{
             type: Component,
-            args: [{ selector: 'igo-widget-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-dynamic-outlet\r\n  *ngIf=\"widget\"\r\n  [component]=\"widget\"\r\n  [inputs]=\"inputs\"\r\n  [subscribers]=\"getEffectiveSubscribers()\">\r\n</igo-dynamic-outlet>\r\n", styles: ["igo-dynamic-outlet{height:100%}\n"] }]
+            args: [{ selector: 'igo-widget-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-dynamic-outlet\n  *ngIf=\"widget\"\n  [component]=\"widget\"\n  [inputs]=\"inputs\"\n  [subscribers]=\"getEffectiveSubscribers()\">\n</igo-dynamic-outlet>\n", styles: ["igo-dynamic-outlet{height:100%}\n"] }]
         }], function () { return []; }, { widget: [{
                 type: Input
             }], inputs: [{
@@ -9751,7 +9888,7 @@ WorkspaceSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WorkspaceSelectorComponent, [{
             type: Component,
-            args: [{ selector: 'igo-workspace-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-entity-selector\r\n  [store]=\"store\"\r\n  [multi]=\"false\"\r\n  [titleAccessor]=\"getWorkspaceTitle\"\r\n  [disabled]=\"disabled\"\r\n  (selectedChange)=\"onSelectedChange($event)\">\r\n</igo-entity-selector>\r\n", styles: ["igo-entity-selector ::ng-deep mat-form-field .mat-form-field-infix{padding:0}igo-entity-selector ::ng-deep mat-form-field .mat-form-field-wrapper{padding-bottom:1.75em}\n"] }]
+            args: [{ selector: 'igo-workspace-selector', changeDetection: ChangeDetectionStrategy.OnPush, template: "<igo-entity-selector\n  [store]=\"store\"\n  [multi]=\"false\"\n  [titleAccessor]=\"getWorkspaceTitle\"\n  [disabled]=\"disabled\"\n  (selectedChange)=\"onSelectedChange($event)\">\n</igo-entity-selector>\n", styles: ["igo-entity-selector ::ng-deep mat-form-field .mat-form-field-infix{padding:0}igo-entity-selector ::ng-deep mat-form-field .mat-form-field-wrapper{padding-bottom:1.75em}\n"] }]
         }], null, { store: [{
                 type: Input
             }], disabled: [{
@@ -9876,7 +10013,7 @@ WorkspaceWidgetOutletComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
 (function () {
     (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WorkspaceWidgetOutletComponent, [{
             type: Component,
-            args: [{ selector: 'igo-workspace-widget-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"widget$ | async as widget\">\r\n  <igo-widget-outlet\r\n    [widget]=\"widget\"\r\n    [inputs]=\"widgetInputs$ | async\"\r\n    [subscribers]=\"widgetSubscribers$ | async\"\r\n    (cancel)=\"onWidgetCancel(widget)\"\r\n    (complete)=\"onWidgetComplete(widget)\">\r\n  </igo-widget-outlet>\r\n</ng-container>\r\n", styles: ["igo-widget-outlet{height:100%}\n"] }]
+            args: [{ selector: 'igo-workspace-widget-outlet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"widget$ | async as widget\">\n  <igo-widget-outlet\n    [widget]=\"widget\"\n    [inputs]=\"widgetInputs$ | async\"\n    [subscribers]=\"widgetSubscribers$ | async\"\n    (cancel)=\"onWidgetCancel(widget)\"\n    (complete)=\"onWidgetComplete(widget)\">\n  </igo-widget-outlet>\n</ng-container>\n", styles: ["igo-widget-outlet{height:100%}\n"] }]
         }], function () { return []; }, { workspace: [{
                 type: Input
             }], deactivateWidget: [{
@@ -10141,5 +10278,5 @@ class Workspace {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionStore, ActionbarComponent, ActionbarMode, BackdropComponent, ClickoutDirective, ClonePipe, CollapseDirective, CollapsibleComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuDirective, CustomHtmlComponent, DOMService, DragAndDropDirective, DynamicComponent, DynamicComponentService, DynamicOutletComponent, EntityOperationType, EntitySelectorComponent, EntityStateManager, EntityStore, EntityStoreFilterCustomFuncStrategy, EntityStoreFilterSelectionStrategy, EntityStoreStrategy, EntityStoreWatcher, EntityTableColumnRenderer, EntityTableComponent, EntityTablePaginatorComponent, EntityTableScrollBehavior, EntityTableSelectionState, EntityTransaction, EntityView, FlexibleComponent, FormComponent, FormFieldComponent, FormFieldSelectComponent, FormFieldService, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent, FormService, HomeButtonComponent, IgoActionModule, IgoActionbarModule, IgoBackdropModule, IgoBadgeIconDirective, IgoClickoutModule, IgoCloneModule, IgoCollapsibleModule, IgoConfirmDialogModule, IgoContextMenuModule, IgoCustomHtmlModule, IgoDOMModule, IgoDrapDropModule, IgoDynamicComponentModule, IgoDynamicOutletModule, IgoEntityModule, IgoEntitySelectorModule, IgoEntityTableModule, IgoEntityTablePaginatorModule, IgoFlexibleModule, IgoFormFieldComponent, IgoFormFieldModule, IgoFormFormModule, IgoFormGroupModule, IgoFormModule, IgoHomeButtonModule, IgoImageModule, IgoInteractiveTourModule, IgoJsonDialogModule, IgoKeyValueModule, IgoListModule, IgoMatBadgeIconModule, IgoPanelModule, IgoSidenavModule, IgoSpinnerModule, IgoStopPropagationModule, IgoTableModule, IgoToolModule, IgoToolboxModule, IgoWidgetModule, IgoWidgetOutletModule, IgoWorkspaceModule, IgoWorkspaceSelectorModule, IgoWorkspaceWidgetOutletModule, InteractiveTourComponent, InteractiveTourLoader, InteractiveTourService, JsonDialogComponent, JsonDialogService, KeyValuePipe, ListComponent, ListItemDirective, PanelComponent, SanitizeHtmlPipe, SecureImagePipe, SidenavShimDirective, SpinnerActivityDirective, SpinnerComponent, StopDropPropagationDirective, StopPropagationDirective, TableActionColor, TableComponent, TableDataSource, TableDatabase, ToolComponent, ToolService, Toolbox, ToolboxColor, ToolboxComponent, Widget, WidgetOutletComponent, WidgetService, Workspace, WorkspaceSelectorComponent, WorkspaceStore, WorkspaceWidgetOutletComponent, formControlIsRequired, getAllFormFields, getControlErrorMessage, getDefaultErrorMessages, getEntityIcon, getEntityId, getEntityProperty, getEntityRevision, getEntityTitle, getEntityTitleHtml, getFormFieldByName };
+export { ActionStore, ActionbarComponent, ActionbarMode, BackdropComponent, ClickoutDirective, ClonePipe, CollapseDirective, CollapsibleComponent, ConfirmDialogComponent, ConfirmDialogService, ContextMenuDirective, CustomHtmlComponent, DOMService, DragAndDropDirective, DynamicComponent, DynamicComponentService, DynamicOutletComponent, EntityOperationType, EntitySelectorComponent, EntityStateManager, EntityStore, EntityStoreFilterCustomFuncStrategy, EntityStoreFilterSelectionStrategy, EntityStoreStrategy, EntityStoreWatcher, EntityTableColumnRenderer, EntityTableComponent, EntityTablePaginatorComponent, EntityTableScrollBehavior, EntityTableSelectionState, EntityTransaction, EntityView, FlexibleComponent, FormComponent, FormFieldComponent, FormFieldSelectComponent, FormFieldService, FormFieldTextComponent, FormFieldTextareaComponent, FormGroupComponent, FormService, HomeButtonComponent, IgoActionModule, IgoActionbarModule, IgoBackdropModule, IgoBadgeIconDirective, IgoClickoutModule, IgoCloneModule, IgoCollapsibleModule, IgoConfirmDialogModule, IgoContextMenuModule, IgoCustomHtmlModule, IgoDOMModule, IgoDrapDropModule, IgoDynamicComponentModule, IgoDynamicOutletModule, IgoEntityModule, IgoEntitySelectorModule, IgoEntityTableModule, IgoEntityTablePaginatorModule, IgoFlexibleModule, IgoFormFieldComponent, IgoFormFieldModule, IgoFormFormModule, IgoFormGroupModule, IgoFormModule, IgoHomeButtonModule, IgoImageModule, IgoInteractiveTourModule, IgoJsonDialogModule, IgoKeyValueModule, IgoListModule, IgoMatBadgeIconModule, IgoPanelModule, IgoSidenavModule, IgoSpinnerModule, IgoStopPropagationModule, IgoTableModule, IgoToolModule, IgoToolboxModule, IgoWidgetModule, IgoWidgetOutletModule, IgoWorkspaceModule, IgoWorkspaceSelectorModule, IgoWorkspaceWidgetOutletModule, ImageErrorDirective, InteractiveTourComponent, InteractiveTourLoader, InteractiveTourService, JsonDialogComponent, JsonDialogService, KeyValuePipe, ListComponent, ListItemDirective, LongPressDirective, PanelComponent, SanitizeHtmlPipe, SecureImagePipe, SidenavShimDirective, SpinnerActivityDirective, SpinnerComponent, StopDropPropagationDirective, StopPropagationDirective, TableActionColor, TableComponent, TableDataSource, TableDatabase, ToolComponent, ToolService, Toolbox, ToolboxColor, ToolboxComponent, Widget, WidgetOutletComponent, WidgetService, Workspace, WorkspaceSelectorComponent, WorkspaceStore, WorkspaceWidgetOutletComponent, formControlIsRequired, getAllFormFields, getControlErrorMessage, getDefaultErrorMessages, getEntityIcon, getEntityId, getEntityProperty, getEntityRevision, getEntityTitle, getEntityTitleHtml, getFormFieldByName };
 //# sourceMappingURL=igo2-common.mjs.map