npm - @igo2/common - Versions diffs - 1.13.2 → 1.13.4 - Mend

@igo2/common 1.13.2 → 1.13.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (180) hide show

package/fesm2020/igo2-common.mjs CHANGED Viewed

@@ -21,7 +21,7 @@ import { Media, IgoLanguageModule } from '@igo2/core';
 import { t } from 'typy';
 import { ReplaySubject, BehaviorSubject, combineLatest, of, Observable, isObservable, fromEvent, throwError, merge, Subject } from 'rxjs';
 import { map, skip, debounceTime, catchError, tap, switchMap, filter, take, distinctUntilChanged } from 'rxjs/operators';
-import { uuid, ObjectUtils } from '@igo2/utils';
+import { uuid, ObjectUtils, userAgent } from '@igo2/utils';
 import * as i4 from '@angular/material/form-field';
 import { MatFormFieldControl, MatFormFieldModule } from '@angular/material/form-field';
 import * as i3 from '@angular/material/select';
@@ -1769,7 +1769,7 @@ EntitySelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Ent
     } }, dependencies: [i1.NgForOf, i1.NgIf, i4.MatFormField, i3.MatSelect, i3$1.MatOption, i1.AsyncPipe], styles: ["mat-form-field[_ngcontent-%COMP%]{width:100%}"], changeDetection: 0 });
 (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: [{
@@ -1919,7 +1919,7 @@ EntityTablePaginatorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
     } }, dependencies: [i2.MatPaginator], styles: ["[_nghost-%COMP%]{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){[_nghost-%COMP%]{margin-top:0;padding-right:5px}}"], changeDetection: 0 });
 (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: [{
@@ -1938,7 +1938,7 @@ EntityTablePaginatorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ typ
 class ImageErrorDirective {
     constructor(el) {
         this.el = el;
-        this.errorImageUrl = '/assets/igo2/common/images/na.png';
+        this.errorImageUrl = './assets/igo2/common/images/na.png';
         this.hideError = false;
     }
     onError(event) {
@@ -3472,7 +3472,7 @@ EntityTableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Entity
     } }, 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\" [ngStyle]=\"{'height': tableHeight}\">\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 igoImageError *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 igoImageError *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'\" [matAutocomplete]=\"auto\"\r\n                            required=\"{{getValidationAttributeValue(column, 'mandatory')}}\" value=\"{{getValue(record, column)}}\"\r\n                            readonly=\"{{getValidationAttributeValue(column, 'readonly')}}\">\r\n                                <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"onAutocompleteValueChange(column, record, $event)\"\r\n                                panelWidth=\"430px\">\r\n                                    <mat-option *ngFor=\"let option of filteredOptions[column.name] | async\"\r\n                                        [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 igoImageError *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 *ngIf=\"column.onClick\" svgIcon=\"{{getValue(record, column)|| column.icon}}\" (click)=\"column.onClick($event)\"></mat-icon>\r\n                      <mat-icon *ngIf=\"!column.onClick\" svgIcon=\"{{getValue(record, column)|| column.icon}}\"></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 || button.editMode === undefined\">\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.UntypedFormBuilder }, { type: i2$1.FocusMonitor }, { type: i0.ElementRef }, { type: i1$4.NgControl, decorators: [{
                 type: Optional
             }, {
@@ -3732,7 +3732,7 @@ ActionbarItemComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Acti
     } }, dependencies: [i1.NgClass, i1.NgIf, i2$2.MatButton, i3$2.MatIcon, i6$1.MatTooltip, i2$3.MatListItem, i2$3.MatListAvatarCssMatStyler, i3$1.MatLine, i10.MatCheckbox, i1.AsyncPipe, i6$2.TranslatePipe], styles: ["mat-list-item.igo-actionbar-item-disabled[_ngcontent-%COMP%]{color:#00000042;cursor:default!important}mat-list-item.igo-actionbar-item-no-display[_ngcontent-%COMP%]{display:none}mat-checkbox[_ngcontent-%COMP%]{padding:12px}.item-checkbox[_ngcontent-%COMP%]{height:56px}.item-checkbox[_ngcontent-%COMP%]     .mat-checkbox-label{margin-left:20px}"], changeDetection: 0 });
 (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: [{
@@ -4064,7 +4064,7 @@ ActionbarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Actionba
     } }, dependencies: [i1.NgForOf, i1.NgIf, i2$2.MatButton, i3$2.MatIcon, i6$1.MatTooltip, i7$1.MatMenu, i7$1.MatMenuTrigger, i2$3.MatList, i9.MatCard, ActionbarItemComponent, i1.AsyncPipe, i6$2.TranslatePipe], styles: ["[_nghost-%COMP%]{display:block;height:100%;overflow:auto;position:relative}button[_ngcontent-%COMP%]{margin:4px}.buttonOverlay[_ngcontent-%COMP%]{margin:0}mat-list[_ngcontent-%COMP%]{padding-top:0}.horizontal[_nghost-%COMP%]{max-width:100%;overflow:visible;overflow:initial}.horizontal[_nghost-%COMP%]   mat-list[_ngcontent-%COMP%]{width:auto;white-space:nowrap}.horizontal[_nghost-%COMP%]   igo-actionbar-item[_ngcontent-%COMP%]{display:inline-block}[_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-base .mat-list-item.mat-list-item-with-avatar{height:46px}[_nghost-%COMP%]     .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content{display:-webkit-flex;height:46px;padding:3px}[_nghost-%COMP%]     .mat-list-base .mat-list-item.mat-list-item-with-avatar .mat-list-item-content>mat-icon{padding:8px}igo-actionbar-item[_ngcontent-%COMP%]     mat-list-item [mat-list-avatar]{height:auto;width:40px}igo-actionbar-item[_ngcontent-%COMP%]     mat-list-item:hover{cursor:pointer}.context-menu-card[_ngcontent-%COMP%]{padding:8px 3px;margin:10px}#topChevron[_ngcontent-%COMP%]{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[_ngcontent-%COMP%]{position:fixed;top:auto;top:initial}}@supports (-ms-accelerator: true){#topChevron[_ngcontent-%COMP%]{position:fixed;top:auto;top:initial}}#lowChevron[_ngcontent-%COMP%]{position:fixed;position:-webkit-sticky;position:sticky;bottom:0;background-color:#fff;z-index:3}"], changeDetection: 0 });
 (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: [{
@@ -4189,7 +4189,7 @@ BackdropComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BackdropC
     } }, dependencies: [i1.NgClass], styles: ["[_nghost-%COMP%] > div[_ngcontent-%COMP%]{position:absolute;top:0;bottom:0;left:0;right:0;background-color:#64646480;z-index:2;display:none}[_nghost-%COMP%] > div.igo-backdrop-shown[_ngcontent-%COMP%]{display:block}"] });
 (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
         }] }); })();
@@ -4547,7 +4547,7 @@ CollapsibleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Collap
     } }, dependencies: [i3$2.MatIcon, i2$3.MatListItem, i2$3.MatListAvatarCssMatStyler, i3$1.MatLine, CollapseDirective], styles: ["[_nghost-%COMP%]     .mat-list .mat-list-item.mat-list-avatar{height:auto;width:auto;padding:0}mat-list-item[_ngcontent-%COMP%]{overflow:hidden}"] });
 (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: [{
@@ -4613,7 +4613,7 @@ ConfirmDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Conf
     } }, dependencies: [i2$2.MatButton, i1$6.MatDialogTitle, i1$6.MatDialogContent, i1$6.MatDialogActions, i6$2.TranslatePipe], styles: ["h2[_ngcontent-%COMP%]{margin:5px 0 10px}div[mat-dialog-content][_ngcontent-%COMP%]{max-width:200px}div[mat-dialog-actions][_ngcontent-%COMP%]{margin:10px 0 0}"] });
 (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); })();
 class ConfirmDialogService {
@@ -4753,14 +4753,29 @@ ContextMenuDirective.ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: Contex
             args: ['contextmenu', ['$event']]
         }] }); })();
+/**
+ * IgoLongPress trigger longpress event after a define duration.
+ * This directive exist to patch the unavailable contextmenu event on iOS.
+ * @param touchDuration touch duration in ms, default value is 400ms
+ * @param iOSOnly define if longpress is triggered only for iOS, default value = true
+ */
 class LongPressDirective {
     constructor() {
+        this.touchDuration = 400;
+        this.onlyIOS = true;
         this.longpress = new EventEmitter();
     }
     touchstart(e) {
         this.touchTimeout = setTimeout(() => {
-            this.longpress.emit(e);
-        }, 400);
+            if (this.onlyIOS) {
+                if (userAgent.getOSName() === 'iOS') {
+                    this.longpress.emit(e);
+                }
+            }
+            else {
+                this.longpress.emit(e);
+            }
+        }, this.touchDuration);
     }
     touchend() {
         this.touchEnd();
@@ -4772,13 +4787,17 @@ class LongPressDirective {
 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" } });
+    } }, inputs: { touchDuration: "touchDuration", onlyIOS: "onlyIOS" }, outputs: { longpress: "longpress" } });
 (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(LongPressDirective, [{
         type: Directive,
         args: [{
                 selector: '[igoLongPress]'
             }]
-    }], function () { return []; }, { longpress: [{
+    }], function () { return []; }, { touchDuration: [{
+            type: Input
+        }], onlyIOS: [{
+            type: Input
+        }], longpress: [{
             type: Output
         }], touchstart: [{
             type: HostListener,
@@ -4835,7 +4854,7 @@ CustomHtmlComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CustomH
     } }, dependencies: [SanitizeHtmlPipe], styles: [".custom-html[_ngcontent-%COMP%]{padding:20px}"] });
 (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
         }] }); })();
@@ -5333,7 +5352,7 @@ DynamicOutletComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dyna
     } }, styles: ["[_nghost-%COMP%]{display:block;width:100%;height:100%}"], changeDetection: 0 });
 (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: [{
@@ -5518,7 +5537,7 @@ FlexibleComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FlexibleC
     } }, styles: ["[_nghost-%COMP%]{display:flex;height:100%;width:100%}.column[_nghost-%COMP%]{flex-direction:column}.row[_nghost-%COMP%]{flex-direction:row}.igo-flexible-main[_ngcontent-%COMP%]{flex:0 0 auto;overflow:hidden}.igo-flexible-main.column[_ngcontent-%COMP%]{transition:height .25s ease-in}.igo-flexible-main.row[_ngcontent-%COMP%]{transition:width .25s ease-in}.igo-flexible-fill[_ngcontent-%COMP%] > div[_ngcontent-%COMP%]{position:absolute;top:0;bottom:0;left:0;right:0}.igo-container[_ngcontent-%COMP%]{width:calc(100% - 10px);height:100%;padding:5px 0;margin:0 5px;overflow:hidden;position:relative}  .igo-flexible-fill{flex:1 1 auto;overflow:hidden;position:relative}  .igo-content{height:100%;width:100%;overflow:auto}  igo-panel{height:100%}"] });
 (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 }]
@@ -5698,7 +5717,7 @@ FormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormComponent
     } }, dependencies: [i1.NgClass, i1$4.ɵNgNoValidate, i1$4.NgControlStatusGroup, i1$4.FormGroupDirective], styles: ["[_nghost-%COMP%]{display:block}form[_ngcontent-%COMP%]{width:100%;height:100%}.igo-form-body[_ngcontent-%COMP%], .igo-form-content[_ngcontent-%COMP%]{height:100%}.igo-form-body-with-buttons[_ngcontent-%COMP%]   .igo-form-content[_ngcontent-%COMP%]{height:calc(100% - 56px)}.igo-form-content[_ngcontent-%COMP%]{display:flex}"], changeDetection: 0 });
 (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: [{
@@ -5918,7 +5937,7 @@ FormFieldComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormFiel
     } }, dependencies: [i1.NgIf, DynamicOutletComponent], styles: ["mat-form-field{width:100%}  .igo-form-disable-switch{margin-right:8px}"], changeDetection: 0 });
 (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
         }] }); })();
@@ -6023,7 +6042,7 @@ FormFieldSelectComponent = __decorate([
 ], FormFieldSelectComponent);
 (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: [{
@@ -6116,7 +6135,7 @@ FormFieldTextComponent = __decorate([
 ], FormFieldTextComponent);
 (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: [{
@@ -6208,7 +6227,7 @@ FormFieldTextareaComponent = __decorate([
 ], FormFieldTextareaComponent);
 (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: [{
@@ -6370,7 +6389,7 @@ FormGroupComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormGrou
     } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i4.MatError, FormFieldComponent, i6$2.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%;height:100%;display:block;overflow:auto;padding:10px 5px}.igo-form-field-wrapper[_ngcontent-%COMP%]{display:inline-block;padding:0 5px}.igo-form-field-colspan-2[_ngcontent-%COMP%]{width:100%}.igo-form-field-colspan-1[_ngcontent-%COMP%]{width:50%}"], changeDetection: 0 });
 (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: [{
@@ -6471,7 +6490,7 @@ HomeButtonComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: HomeBut
     } }, dependencies: [i3$2.MatIcon, i2$2.MatButton, i6$1.MatTooltip, i6$2.TranslatePipe], styles: ["#homeButton[_ngcontent-%COMP%]{position:absolute;top:50px;left:0px;border-radius:0;height:46px;width:48px}"] });
 (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
         }] }); })();
@@ -7378,7 +7397,7 @@ InteractiveTourComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: In
     } }, dependencies: [i1.NgClass, i1.NgIf, i3$2.MatIcon, i2$2.MatButton, i6$1.MatTooltip, i1.AsyncPipe, i6$2.TranslatePipe], 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"], encapsulation: 2 });
 (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: [{
@@ -7554,7 +7573,7 @@ JsonDialogComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: JsonDia
     } }, dependencies: [i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i2$2.MatButton, i1$6.MatDialogTitle, i1$6.MatDialogContent, i1$6.MatDialogActions, KeyValuePipe], encapsulation: 2 });
 (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); })();
 class JsonDialogService {
@@ -8001,7 +8020,7 @@ ListComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListComponent
     } }, 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-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"] }]
+        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: [{
@@ -8085,7 +8104,7 @@ PanelComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PanelCompone
     } }, dependencies: [i1.NgIf], styles: ["[_nghost-%COMP%]{display:block}.igo-panel-header[_ngcontent-%COMP%]{height:46px;padding:3px;text-align:center}.igo-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]{margin:0;height:40px}.igo-panel-header[_ngcontent-%COMP%]     [panelleftbutton]{float:left;margin-right:-40px}.igo-panel-header[_ngcontent-%COMP%]     [panelrightbutton]{float:right}.igo-panel-content[_ngcontent-%COMP%]{overflow:auto}.igo-panel-with-header[_nghost-%COMP%]   .igo-panel-content[_ngcontent-%COMP%]{height:calc(100% - 46px)}[_nghost-%COMP%]:not(.igo-panel-with-header)   .igo-panel-content[_ngcontent-%COMP%]{height:100%}.igo-panel-title[_ngcontent-%COMP%]{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}"], changeDetection: 0 });
 (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: [{
@@ -8208,7 +8227,7 @@ SpinnerComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SpinnerCom
     } }, dependencies: [i1.NgClass, i2$4.MatProgressSpinner, i1.AsyncPipe], styles: [".igo-spinner-container[_ngcontent-%COMP%]{display:none;pointer-events:none}.igo-spinner-container.igo-spinner-shown[_ngcontent-%COMP%]{display:block}mat-progress-spinner[_ngcontent-%COMP%]{height:40px;width:40px;border-radius:50%}.igo-spinner-background[_ngcontent-%COMP%]{height:36px;width:36px;border-radius:50%;border:4px solid #ffffff;position:absolute;top:2px;left:2px}"] });
 (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
         }] }); })();
@@ -8596,7 +8615,7 @@ TableComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TableCompone
     } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i3$2.MatIcon, i2$2.MatButton, i5.MatTable, i5.MatHeaderCellDef, i5.MatHeaderRowDef, i5.MatColumnDef, i5.MatCellDef, i5.MatRowDef, i5.MatHeaderCell, i5.MatCell, i5.MatHeaderRow, i5.MatRow, i4.MatFormField, i5$1.MatInput, i7.MatSort, i7.MatSortHeader, i10.MatCheckbox, i6$2.TranslatePipe], styles: ["[_nghost-%COMP%]{width:100%;height:100%;display:block}.table-container[_ngcontent-%COMP%]{display:flex;flex-direction:column;height:100%;overflow:auto;flex:1 1 auto}.table-box[_ngcontent-%COMP%]{height:100%;display:flex;flex-direction:column}.table-header[_ngcontent-%COMP%]{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][_ngcontent-%COMP%], tr[mat-row][_ngcontent-%COMP%]{height:60px}.mat-cell-text[_ngcontent-%COMP%]{overflow:hidden;word-wrap:break-word}td[mat-cell][_ngcontent-%COMP%]{padding-right:15px}th.mat-header-cell[_ngcontent-%COMP%]{padding-right:5px}button[_ngcontent-%COMP%]{margin-right:10px}"] });
 (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: [{
@@ -8919,7 +8938,7 @@ ToolboxComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ToolboxCom
     } }, dependencies: [i1.NgClass, i1.NgIf, ActionbarComponent, DynamicOutletComponent, i1.AsyncPipe], styles: ["[_nghost-%COMP%]{display:block;position:relative;overflow:hidden;width:100%;height:100%}.igo-tool-container[_ngcontent-%COMP%]{position:absolute;top:0;bottom:0;left:0;right:0}.igo-tool-container-with-animation[_ngcontent-%COMP%]{transform:translate3d(100%,0,0)}.igo-tool-container-with-toolbar[_ngcontent-%COMP%]{left:50px}igo-actionbar[_ngcontent-%COMP%]{height:100%}igo-actionbar.with-title[_ngcontent-%COMP%]{width:100%;overflow:auto}igo-actionbar[_ngcontent-%COMP%]: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[_ngcontent-%COMP%]:not(.with-title){overflow:auto}}igo-dynamic-outlet[_ngcontent-%COMP%]{overflow:auto}"], data: { animation: [toolSlideInOut()] }, changeDetection: 0 });
 (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: [{
@@ -9090,7 +9109,7 @@ WidgetOutletComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Widge
     } }, dependencies: [i1.NgIf, DynamicOutletComponent], styles: ["igo-dynamic-outlet[_ngcontent-%COMP%]{height:100%}"], changeDetection: 0 });
 (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: [{
@@ -9212,7 +9231,7 @@ WorkspaceSelectorComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type:
     } }, dependencies: [EntitySelectorComponent], styles: ["igo-entity-selector[_ngcontent-%COMP%]     mat-form-field .mat-form-field-infix{padding:0}igo-entity-selector[_ngcontent-%COMP%]     mat-form-field .mat-form-field-wrapper{padding-bottom:1.75em}"], changeDetection: 0 });
 (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: [{
@@ -9325,7 +9344,7 @@ WorkspaceWidgetOutletComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ ty
     } }, dependencies: [i1.NgIf, WidgetOutletComponent, i1.AsyncPipe], styles: ["igo-widget-outlet[_ngcontent-%COMP%]{height:100%}"], changeDetection: 0 });
 (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: [{