@igo2/common 1.13.2 → 1.13.3

package/fesm2020/igo2-common.mjs

@@ -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';
@@ -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}\">\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"] }]
     }], function () { return [{ type: i0.ChangeDetectorRef }, { type: i1$4.UntypedFormBuilder }, { type: i2$1.FocusMonitor }, { type: i0.ElementRef }, { type: i1$4.NgControl, decorators: [{
                 type: Optional
             }, {
@@ -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,