@sumaris-net/ngx-components 4.0.0-rc12 → 4.0.0-rc14

package/fesm2022/sumaris-net.ngx-components.mjs

@@ -31428,13 +31428,13 @@ class AppPropertiesTable extends AppInMemoryTable {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppPropertiesTable, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormBuilder }, { token: PropertyEntityValidator }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: AppPropertiesTable, selector: "app-properties-table", inputs: { definitions: "definitions", showToolbar: "showToolbar" }, providers: [
             { provide: PropertyEntityValidator, useClass: PropertyEntityValidator }
-        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar *ngIf=\"showToolbar\" [class.expanded]=\"filterExpansionPanel.expanded\">\n\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\"\n          [title]=\"'COMMON.BTN_REFRESH'|translate\"\n          (click)=\"onRefresh.emit()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <!-- Reset filter -->\n  <button mat-icon-button (click)=\"resetFilter()\"\n          *ngIf=\"filterCriteriaCount\">\n    <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n    <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n  </button>\n\n  <!-- Show filter -->\n  <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n    <mat-icon [matBadge]=\"filterCriteriaCount\"\n              [matBadgeHidden]=\"filterIsEmpty\"\n              matBadgeColor=\"accent\"\n              matBadgeSize=\"small\"\n              matBadgePosition=\"above after\">filter_list_alt\n    </mat-icon>\n  </button>\n\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel\n                       class=\"filter-panel\"\n                       [class.ion-no-padding]=\"mobile\"\n                       [class.filter-panel-floating]=\"filterPanelFloating\">\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{'SETTINGS.FILTER.SEARCH'|translate}}</mat-label>\n              <input matInput formControlName=\"searchText\">\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              formControlName=\"notDefaultOnly\"\n              [placeholder]=\"'SETTINGS.FILTER.ONLY_NOT_DEFAULT' | translate\"\n              floatLabel=\"always\"\n            ></mat-boolean-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button mat-icon-button color=\"accent\"\n              *ngIf=\"filterPanelFloating\"\n              (click)=\"toggleFilterPanelFloating()\"\n              class=\"hidden-xs hidden-sm hidden-md\"\n              [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') |translate\">\n        <mat-icon><span style=\"transform: rotate(90deg);\">{{filterPanelFloating ? '&#xbb;' : '&#xab;'}}</span></mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"closeFilterPanel()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\"\n           [style.--mat-row-height]=\"'52px'\">\n\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"true\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"true\"></td>\n      </ng-container>\n\n      <!-- id column (hidden) -->\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!debug\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!debug\">\n          {{ row.currentData.id }}\n        </td>\n      </ng-container>\n\n      <!-- definition column -->\n      <ng-container matColumnDef=\"definition\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"ion-padding-start\">\n          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n<!--          <mat-autocomplete-field-->\n<!--            *ngIf=\"row.id === -1; else readOnlyDefinition\"-->\n<!--            [formControl]=\"row.validator | formGetControl : 'definition'\"-->\n<!--            [config]=\"autocompleteFields.definition\"-->\n<!--            [required]=\"true\"-->\n<!--          ></mat-autocomplete-field>-->\n<!--          <ng-template #readOnlyDefinition>-->\n        <td mat-cell *matCellDef=\"let row\" class=\"ion-padding-start\">\n            {{ row.currentData | propertyGet : 'definition.translatedName' }}\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <ng-container matColumnDef=\"value\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label>{{ i18nColumnPrefix + 'VALUE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <app-form-field\n            *ngIf=\"row.validator | formGetValue: 'id'\"\n            floatLabel=\"never\"\n            [definition]=\"definitionsMapByKey[row.validator | formGetValue: 'id']\"\n            [formControl]=\"row.validator | formGetControl:'value'\"\n            [placeholder]=\"i18nColumnPrefix + 'VALUE' | translate\"\n            [required]=\"true\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"true\"\n        [canCancel]=\"false\"\n        [canDelete]=\"false\"\n        [dirtyIcon]=\"false\"\n        [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <button type=\"button\" mat-icon-button\n                  *ngIf=\"!mobile && !disabled && (row.validator | formGetValue : 'value') !== (row.validator | formGetValue : 'definition').defaultValue\"\n                  [class.visible-hover-row]=\"!mobile\"\n                  [tabindex]=\"-1\"\n                  [title]=\"'SETTINGS.BTN_RESET_PROPERTY'|translate\"\n                  (click)=\"resetProperty($event, row)\">\n            <mat-icon>undo</mat-icon>\n          </button>\n\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n  </div>\n</ion-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i9$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i11$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i7$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "clearable", "chipColor", "debug", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar *ngIf=\"showToolbar\" [class.expanded]=\"filterExpansionPanel.expanded\">\n\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\"\n          [title]=\"'COMMON.BTN_REFRESH'|translate\"\n          (click)=\"onRefresh.emit()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <!-- Reset filter -->\n  <button mat-icon-button (click)=\"resetFilter()\"\n          *ngIf=\"filterCriteriaCount\">\n    <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n    <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n  </button>\n\n  <!-- Show filter -->\n  <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n    <mat-icon [matBadge]=\"filterCriteriaCount\"\n              [matBadgeHidden]=\"filterIsEmpty\"\n              matBadgeColor=\"accent\"\n              matBadgeSize=\"small\"\n              matBadgePosition=\"above after\"\n              aria-hidden=\"false\"\n    >filter_list_alt\n    </mat-icon>\n  </button>\n\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel\n                       class=\"filter-panel\"\n                       [class.ion-no-padding]=\"mobile\"\n                       [class.filter-panel-floating]=\"filterPanelFloating\">\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{'SETTINGS.FILTER.SEARCH'|translate}}</mat-label>\n              <input matInput formControlName=\"searchText\">\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              formControlName=\"notDefaultOnly\"\n              [placeholder]=\"'SETTINGS.FILTER.ONLY_NOT_DEFAULT' | translate\"\n              floatLabel=\"always\"\n            ></mat-boolean-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button mat-icon-button color=\"accent\"\n              *ngIf=\"filterPanelFloating\"\n              (click)=\"toggleFilterPanelFloating()\"\n              class=\"hidden-xs hidden-sm hidden-md\"\n              [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') |translate\">\n        <mat-icon><span style=\"transform: rotate(90deg);\">{{filterPanelFloating ? '&#xbb;' : '&#xab;'}}</span></mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"closeFilterPanel()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\"\n           [style.--mat-row-height]=\"'52px'\">\n\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"true\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"true\"></td>\n      </ng-container>\n\n      <!-- id column (hidden) -->\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!debug\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!debug\">\n          {{ row.currentData.id }}\n        </td>\n      </ng-container>\n\n      <!-- definition column -->\n      <ng-container matColumnDef=\"definition\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"ion-padding-start\">\n          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n<!--          <mat-autocomplete-field-->\n<!--            *ngIf=\"row.id === -1; else readOnlyDefinition\"-->\n<!--            [formControl]=\"row.validator | formGetControl : 'definition'\"-->\n<!--            [config]=\"autocompleteFields.definition\"-->\n<!--            [required]=\"true\"-->\n<!--          ></mat-autocomplete-field>-->\n<!--          <ng-template #readOnlyDefinition>-->\n        <td mat-cell *matCellDef=\"let row\" class=\"ion-padding-start\">\n            {{ row.currentData | propertyGet : 'definition.translatedName' }}\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <ng-container matColumnDef=\"value\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label>{{ i18nColumnPrefix + 'VALUE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <app-form-field\n            *ngIf=\"row.validator | formGetValue: 'id'\"\n            floatLabel=\"never\"\n            [definition]=\"definitionsMapByKey[row.validator | formGetValue: 'id']\"\n            [formControl]=\"row.validator | formGetControl:'value'\"\n            [placeholder]=\"i18nColumnPrefix + 'VALUE' | translate\"\n            [required]=\"true\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"true\"\n        [canCancel]=\"false\"\n        [canDelete]=\"false\"\n        [dirtyIcon]=\"false\"\n        [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <button type=\"button\" mat-icon-button\n                  *ngIf=\"!mobile && !disabled && (row.validator | formGetValue : 'value') !== (row.validator | formGetValue : 'definition').defaultValue\"\n                  [class.visible-hover-row]=\"!mobile\"\n                  [tabindex]=\"-1\"\n                  [title]=\"'SETTINGS.BTN_RESET_PROPERTY'|translate\"\n                  (click)=\"resetProperty($event, row)\">\n            <mat-icon>undo</mat-icon>\n          </button>\n\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n  </div>\n</ion-content>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i9$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i9$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i11$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i7$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "clearable", "chipColor", "debug", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: AppPropertiesTable, decorators: [{
             type: Component,
             args: [{ selector: 'app-properties-table', providers: [
                         { provide: PropertyEntityValidator, useClass: PropertyEntityValidator }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar *ngIf=\"showToolbar\" [class.expanded]=\"filterExpansionPanel.expanded\">\n\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\"\n          [title]=\"'COMMON.BTN_REFRESH'|translate\"\n          (click)=\"onRefresh.emit()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <!-- Reset filter -->\n  <button mat-icon-button (click)=\"resetFilter()\"\n          *ngIf=\"filterCriteriaCount\">\n    <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n    <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n  </button>\n\n  <!-- Show filter -->\n  <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n    <mat-icon [matBadge]=\"filterCriteriaCount\"\n              [matBadgeHidden]=\"filterIsEmpty\"\n              matBadgeColor=\"accent\"\n              matBadgeSize=\"small\"\n              matBadgePosition=\"above after\">filter_list_alt\n    </mat-icon>\n  </button>\n\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel\n                       class=\"filter-panel\"\n                       [class.ion-no-padding]=\"mobile\"\n                       [class.filter-panel-floating]=\"filterPanelFloating\">\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{'SETTINGS.FILTER.SEARCH'|translate}}</mat-label>\n              <input matInput formControlName=\"searchText\">\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              formControlName=\"notDefaultOnly\"\n              [placeholder]=\"'SETTINGS.FILTER.ONLY_NOT_DEFAULT' | translate\"\n              floatLabel=\"always\"\n            ></mat-boolean-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button mat-icon-button color=\"accent\"\n              *ngIf=\"filterPanelFloating\"\n              (click)=\"toggleFilterPanelFloating()\"\n              class=\"hidden-xs hidden-sm hidden-md\"\n              [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') |translate\">\n        <mat-icon><span style=\"transform: rotate(90deg);\">{{filterPanelFloating ? '&#xbb;' : '&#xab;'}}</span></mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"closeFilterPanel()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\"\n           [style.--mat-row-height]=\"'52px'\">\n\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"true\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"true\"></td>\n      </ng-container>\n\n      <!-- id column (hidden) -->\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!debug\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!debug\">\n          {{ row.currentData.id }}\n        </td>\n      </ng-container>\n\n      <!-- definition column -->\n      <ng-container matColumnDef=\"definition\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"ion-padding-start\">\n          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n<!--          <mat-autocomplete-field-->\n<!--            *ngIf=\"row.id === -1; else readOnlyDefinition\"-->\n<!--            [formControl]=\"row.validator | formGetControl : 'definition'\"-->\n<!--            [config]=\"autocompleteFields.definition\"-->\n<!--            [required]=\"true\"-->\n<!--          ></mat-autocomplete-field>-->\n<!--          <ng-template #readOnlyDefinition>-->\n        <td mat-cell *matCellDef=\"let row\" class=\"ion-padding-start\">\n            {{ row.currentData | propertyGet : 'definition.translatedName' }}\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <ng-container matColumnDef=\"value\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label>{{ i18nColumnPrefix + 'VALUE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <app-form-field\n            *ngIf=\"row.validator | formGetValue: 'id'\"\n            floatLabel=\"never\"\n            [definition]=\"definitionsMapByKey[row.validator | formGetValue: 'id']\"\n            [formControl]=\"row.validator | formGetControl:'value'\"\n            [placeholder]=\"i18nColumnPrefix + 'VALUE' | translate\"\n            [required]=\"true\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"true\"\n        [canCancel]=\"false\"\n        [canDelete]=\"false\"\n        [dirtyIcon]=\"false\"\n        [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <button type=\"button\" mat-icon-button\n                  *ngIf=\"!mobile && !disabled && (row.validator | formGetValue : 'value') !== (row.validator | formGetValue : 'definition').defaultValue\"\n                  [class.visible-hover-row]=\"!mobile\"\n                  [tabindex]=\"-1\"\n                  [title]=\"'SETTINGS.BTN_RESET_PROPERTY'|translate\"\n                  (click)=\"resetProperty($event, row)\">\n            <mat-icon>undo</mat-icon>\n          </button>\n\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n  </div>\n</ion-content>\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-toolbar *ngIf=\"showToolbar\" [class.expanded]=\"filterExpansionPanel.expanded\">\n\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\"\n          [title]=\"'COMMON.BTN_REFRESH'|translate\"\n          (click)=\"onRefresh.emit()\">\n    <mat-icon>refresh</mat-icon>\n  </button>\n\n  <ion-item *ngIf=\"!mobile && error; let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"toolbar-spacer\"></div>\n\n  <!-- Reset filter -->\n  <button mat-icon-button (click)=\"resetFilter()\"\n          *ngIf=\"filterCriteriaCount\">\n    <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n    <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n  </button>\n\n  <!-- Show filter -->\n  <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n    <mat-icon [matBadge]=\"filterCriteriaCount\"\n              [matBadgeHidden]=\"filterIsEmpty\"\n              matBadgeColor=\"accent\"\n              matBadgeSize=\"small\"\n              matBadgePosition=\"above after\"\n              aria-hidden=\"false\"\n    >filter_list_alt\n    </mat-icon>\n  </button>\n\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel\n                       class=\"filter-panel\"\n                       [class.ion-no-padding]=\"mobile\"\n                       [class.filter-panel-floating]=\"filterPanelFloating\">\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{'SETTINGS.FILTER.SEARCH'|translate}}</mat-label>\n              <input matInput formControlName=\"searchText\">\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <mat-boolean-field\n              [style]=\"'checkbox'\"\n              formControlName=\"notDefaultOnly\"\n              [placeholder]=\"'SETTINGS.FILTER.ONLY_NOT_DEFAULT' | translate\"\n              floatLabel=\"always\"\n            ></mat-boolean-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button mat-icon-button color=\"accent\"\n              *ngIf=\"filterPanelFloating\"\n              (click)=\"toggleFilterPanelFloating()\"\n              class=\"hidden-xs hidden-sm hidden-md\"\n              [title]=\"(filterPanelFloating ? 'COMMON.BTN_EXPAND' : 'COMMON.BTN_HIDE') |translate\">\n        <mat-icon><span style=\"transform: rotate(90deg);\">{{filterPanelFloating ? '&#xbb;' : '&#xab;'}}</span></mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"closeFilterPanel()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- table -->\n  <div class=\"table-container\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\"\n           [style.--mat-row-height]=\"'52px'\">\n\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"true\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"true\"></td>\n      </ng-container>\n\n      <!-- id column (hidden) -->\n      <ng-container matColumnDef=\"id\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!debug\"></th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!debug\">\n          {{ row.currentData.id }}\n        </td>\n      </ng-container>\n\n      <!-- definition column -->\n      <ng-container matColumnDef=\"definition\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"ion-padding-start\">\n          <ion-label>{{ i18nColumnPrefix + 'DEFINITION' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n<!--          <mat-autocomplete-field-->\n<!--            *ngIf=\"row.id === -1; else readOnlyDefinition\"-->\n<!--            [formControl]=\"row.validator | formGetControl : 'definition'\"-->\n<!--            [config]=\"autocompleteFields.definition\"-->\n<!--            [required]=\"true\"-->\n<!--          ></mat-autocomplete-field>-->\n<!--          <ng-template #readOnlyDefinition>-->\n        <td mat-cell *matCellDef=\"let row\" class=\"ion-padding-start\">\n            {{ row.currentData | propertyGet : 'definition.translatedName' }}\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <ng-container matColumnDef=\"value\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label>{{ i18nColumnPrefix + 'VALUE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <app-form-field\n            *ngIf=\"row.validator | formGetValue: 'id'\"\n            floatLabel=\"never\"\n            [definition]=\"definitionsMapByKey[row.validator | formGetValue: 'id']\"\n            [formControl]=\"row.validator | formGetControl:'value'\"\n            [placeholder]=\"i18nColumnPrefix + 'VALUE' | translate\"\n            [required]=\"true\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"true\"\n        [canCancel]=\"false\"\n        [canDelete]=\"false\"\n        [dirtyIcon]=\"false\"\n        [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <button type=\"button\" mat-icon-button\n                  *ngIf=\"!mobile && !disabled && (row.validator | formGetValue : 'value') !== (row.validator | formGetValue : 'definition').defaultValue\"\n                  [class.visible-hover-row]=\"!mobile\"\n                  [tabindex]=\"-1\"\n                  [title]=\"'SETTINGS.BTN_RESET_PROPERTY'|translate\"\n                  (click)=\"resetProperty($event, row)\">\n            <mat-icon>undo</mat-icon>\n          </button>\n\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n  </div>\n</ion-content>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.UntypedFormBuilder }, { type: PropertyEntityValidator }, { type: Environment, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -35148,7 +35148,12 @@ class AppAsyncTable {
         if (this.dirty || this.dataSource.hasSomeEditingRow()) {
             for (const row of this.dataSource.getEditingRows()) {
                 // Cancel the current editing row only if editing and if it was not previously saved
-                await this.dataSource.cancelOrDelete(row);
+                if (row.id === -1) {
+                    await this.dataSource.delete(-1);
+                }
+                else if (row.editing) {
+                    await this.dataSource.cancel(row);
+                }
                 // Check if row as pristine
                 await this.checkIfRowPristine(row, { onlySelf: true /* avoid propagation to table - done just after */ });
             }
@@ -37510,11 +37515,11 @@ class UserEventNotificationIcon {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: UserEventNotificationIcon, deps: [{ token: APP_USER_EVENT_SERVICE, optional: true }, { token: AccountService }, { token: i2$2.PopoverController }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: UserEventNotificationIcon, selector: "app-user-event-notification-icon", inputs: { debug: "debug", titleI18n: "titleI18n", disabled: "disabled", filter: "filter", autoHide: "autoHide", headerActions: "headerActions", footerActions: "footerActions" }, ngImport: i0, template: "<button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *ngIf=\"visible\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"countChanges$ | async\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >notifications\n  </mat-icon>\n</button>\n\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i7$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: UserEventNotificationIcon, selector: "app-user-event-notification-icon", inputs: { debug: "debug", titleI18n: "titleI18n", disabled: "disabled", filter: "filter", autoHide: "autoHide", headerActions: "headerActions", footerActions: "footerActions" }, ngImport: i0, template: "<button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *ngIf=\"visible\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"countChanges$ | async\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n    aria-hidden=\"false\"\n  >notifications\n  </mat-icon>\n</button>\n\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i7$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: UserEventNotificationIcon, decorators: [{
             type: Component,
-            args: [{ selector: 'app-user-event-notification-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *ngIf=\"visible\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"countChanges$ | async\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >notifications\n  </mat-icon>\n</button>\n\n" }]
+            args: [{ selector: 'app-user-event-notification-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *ngIf=\"visible\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon\n    [matBadge]=\"countChanges$ | async\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n    aria-hidden=\"false\"\n  >notifications\n  </mat-icon>\n</button>\n\n" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -38276,11 +38281,11 @@ class JobProgressionIcon extends RxState {
         this._subscriptions.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: JobProgressionIcon, deps: [{ token: APP_JOB_PROGRESSION_SERVICE, optional: true }, { token: i2$2.PopoverController }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: JobProgressionIcon, selector: "app-job-progression-icon", inputs: { debug: "debug", titleI18n: "titleI18n", options: "options", autoHide: "autoHide", headerActions: "headerActions" }, outputs: { jobFinished: "jobFinished" }, providers: [RxState], usesInheritance: true, ngImport: i0, template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *rxIf=\"visible$\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon *rxLet=\"jobCount$; let jobCount\"\n    [matBadge]=\"jobCount\"\n    [matBadgeHidden]=\"!jobCount\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >{{ disabled || jobCount ? 'schedule' : 'task_alt' }}\n  </mat-icon>\n  <mat-spinner\n    #spinner\n    *rxIf=\"jobCount$\"\n    class=\"floating-spinner\"\n    [color]=\"color\"\n    [mode]=\"mode$ | push\"\n    [value]=\"value$ | push\"\n    diameter=\"30\"\n    strokeWidth=\"3\"\n  ></mat-spinner>\n</button>\n\n", styles: [".floating-spinner{position:absolute;height:24px!important;width:24px!important;top:12px;left:12px}\n"], dependencies: [{ kind: "directive", type: i9.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i10$1.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i7$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6$5.RxPush, name: "push" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: JobProgressionIcon, selector: "app-job-progression-icon", inputs: { debug: "debug", titleI18n: "titleI18n", options: "options", autoHide: "autoHide", headerActions: "headerActions" }, outputs: { jobFinished: "jobFinished" }, providers: [RxState], usesInheritance: true, ngImport: i0, template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *rxIf=\"visible$\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon *rxLet=\"jobCount$; let jobCount\"\n    [matBadge]=\"jobCount\"\n    [matBadgeHidden]=\"!jobCount\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n            aria-hidden=\"false\"\n  >{{ disabled || jobCount ? 'schedule' : 'task_alt' }}\n  </mat-icon>\n  <mat-spinner\n    #spinner\n    *rxIf=\"jobCount$\"\n    class=\"floating-spinner\"\n    [color]=\"color\"\n    [mode]=\"mode$ | push\"\n    [value]=\"value$ | push\"\n    diameter=\"30\"\n    strokeWidth=\"3\"\n  ></mat-spinner>\n</button>\n\n", styles: [".floating-spinner{position:absolute;height:24px!important;width:24px!important;top:12px;left:12px}\n"], dependencies: [{ kind: "directive", type: i9.RxIf, selector: "[rxIf]", inputs: ["rxIf", "rxIfStrategy", "rxIfElse", "rxIfThen", "rxIfSuspense", "rxIfComplete", "rxIfError", "rxIfContextTrigger", "rxIfNextTrigger", "rxIfSuspenseTrigger", "rxIfErrorTrigger", "rxIfCompleteTrigger", "rxIfParent", "rxIfPatchZone", "rxIfRenderCallback"] }, { kind: "directive", type: i10$1.RxLet, selector: "[rxLet]", inputs: ["rxLet", "rxLetStrategy", "rxLetComplete", "rxLetError", "rxLetSuspense", "rxLetContextTrigger", "rxLetCompleteTrigger", "rxLetErrorTrigger", "rxLetSuspenseTrigger", "rxLetNextTrigger", "rxLetRenderCallback", "rxLetParent", "rxLetPatchZone"], outputs: ["rendered"] }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6$7.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: i7$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i6$5.RxPush, name: "push" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: JobProgressionIcon, decorators: [{
             type: Component,
-            args: [{ selector: 'app-job-progression-icon', providers: [RxState], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *rxIf=\"visible$\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon *rxLet=\"jobCount$; let jobCount\"\n    [matBadge]=\"jobCount\"\n    [matBadgeHidden]=\"!jobCount\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n  >{{ disabled || jobCount ? 'schedule' : 'task_alt' }}\n  </mat-icon>\n  <mat-spinner\n    #spinner\n    *rxIf=\"jobCount$\"\n    class=\"floating-spinner\"\n    [color]=\"color\"\n    [mode]=\"mode$ | push\"\n    [value]=\"value$ | push\"\n    diameter=\"30\"\n    strokeWidth=\"3\"\n  ></mat-spinner>\n</button>\n\n", styles: [".floating-spinner{position:absolute;height:24px!important;width:24px!important;top:12px;left:12px}\n"] }]
+            args: [{ selector: 'app-job-progression-icon', providers: [RxState], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #button\n  mat-icon-button\n  [title]=\"titleI18n | translate\"\n  [disabled]=\"disabled\"\n  *rxIf=\"visible$\"\n  (click)=\"showList($event)\"\n>\n  <mat-icon *rxLet=\"jobCount$; let jobCount\"\n    [matBadge]=\"jobCount\"\n    [matBadgeHidden]=\"!jobCount\"\n    matBadgeColor=\"accent\"\n    matBadgeSize=\"small\"\n    matBadgePosition=\"above after\"\n            aria-hidden=\"false\"\n  >{{ disabled || jobCount ? 'schedule' : 'task_alt' }}\n  </mat-icon>\n  <mat-spinner\n    #spinner\n    *rxIf=\"jobCount$\"\n    class=\"floating-spinner\"\n    [color]=\"color\"\n    [mode]=\"mode$ | push\"\n    [value]=\"value$ | push\"\n    diameter=\"30\"\n    strokeWidth=\"3\"\n  ></mat-spinner>\n</button>\n\n", styles: [".floating-spinner{position:absolute;height:24px!important;width:24px!important;top:12px;left:12px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -38826,11 +38831,11 @@ class UsersPage extends AppTable {
         this.cd.markForCheck();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: UsersPage, deps: [{ token: i0.Injector }, { token: i1$2.UntypedFormBuilder }, { token: AccountService }, { token: i2$8.ValidatorService }, { token: ConfigService }, { token: PersonService }, { token: MessageService }, { token: MenuService }, { token: i0.ChangeDetectorRef }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: UsersPage, selector: "app-users-table", inputs: { useSticky: "useSticky" }, providers: [{ provide: ValidatorService, useExisting: PersonValidatorService }], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [title]=\"'USER.LIST.TITLE'|translate\"\n             color=\"primary\"\n             [canGoBack]=\"false\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\">\n  <ion-buttons slot=\"end\">\n\n    <!-- Compose message -->\n    <button mat-icon-button *ngIf=\"canSendMessage\"\n            [title]=\"'USER.LIST.BTN_SEND_MESSAGE'|translate\"\n            (click)=\"openComposeMessageModal($event)\">\n      <ion-icon name=\"mail\" slot=\"icon-only\"></ion-icon>\n    </button>\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- Refresh -->\n      <button mat-icon-button *ngIf=\"!mobile\"\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"onRefresh.emit()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\">filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n    </ng-container>\n\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              class=\"hidden-xs hidden-sm\"\n              [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- error -->\n  <ion-item *ngIf=\"errorSubject|async ; let error\" lines=\"none\"\n            class=\"hidden-sm hidden-xs hidden-mobile\"\n            @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <!-- debug -->\n  <app-debug *ngIf=\"debug\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col>\n          focusColumn: {{focusColumn}}<br/>\n          loadingSubject: {{loading}}<br/>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"ion-no-padding filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{ 'USER.LIST.FILTER.SEARCH'|translate }}</mat-label>\n              <input matInput formControlName=\"searchText\">\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- status -->\n            <mat-form-field>\n              <mat-select formControlName=\"statusId\" [placeholder]=\"'USER.STATUS'|translate\">\n                <mat-option [value]=\"null\"><i><span translate>COMMON.EMPTY_OPTION</span></i></mat-option>\n                <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                  <ion-icon [name]=\"item.icon\"></ion-icon>\n                  {{ item.label |translate }}\n                </mat-option>\n              </mat-select>\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.statusId)\"\n                      [hidden]=\"filterForm.controls.statusId.disabled || !filterForm.controls.statusId.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && (errorSubject | async); let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"table-container\">\n    <table #table mat-table matSort\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\" [matSortDirection]=\"defaultSortDirection\"\n           matSortDisableClear [trackBy]=\"trackByFn\">\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (click)=\"toggleSelectRow($event, row)\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData.id }}</td>\n      </ng-container>\n\n      <!-- avatar Column -->\n      <ng-container matColumnDef=\"avatar\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <div class=\"avatar\" *ngIf=\"row.currentData.avatar; else generateIcon\"\n               [ngStyle]=\"{'background-image':'url('+row.currentData.avatar+')'}\"></div>\n          <ng-template #generateIcon>\n            <div class=\"avatar\">\n              <svg width=\"38\" [data-jdenticon-value]=\"row.currentData.id\"></svg>\n            </div>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- lastName  -->\n      <ng-container matColumnDef=\"lastName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.LAST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='lastName'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput\n                   [formControl]=\"row.validator.controls['lastName']\"\n                   [placeholder]=\"'USER.LAST_NAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='lastName'\">\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'lastName')}}\n            </ion-label>\n          </ng-template>\n        </td>\n\n      </ng-container>\n\n      <!-- firstname -->\n      <ng-container matColumnDef=\"firstName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.FIRST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='firstName'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls['firstName']\"\n                   [placeholder]=\"'USER.FIRST_NAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='firstName'\">\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'firstName')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- email  -->\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.EMAIL</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='email'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls['email']\"\n                   [placeholder]=\"'USER.EMAIL'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='email'\">\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('email')\">\n              <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'email')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- additional fields -->\n      <ng-container *ngFor=\"let definition of additionalFields\" [matColumnDef]=\"definition.key\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span>{{definition.label|translate}}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn=definition.key\">\n          <app-form-field floatLabel=\"never\"\n                          [definition]=\"definition\"\n                          [formControl]=\"row.validator.controls[definition.key]\"\n                          [required]=\"definition.extra?.account?.required\"\n                          [autofocus]=\"row.editing && focusColumn===definition.key\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- profile column  -->\n      <ng-container matColumnDef=\"profile\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.PROFILE</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='profile'\">\n          <mat-form-field>\n            <mat-select [formControl]=\"row.validator.controls['mainProfile']\"\n                        [placeholder]=\"'USER.PROFILE'|translate\">\n              <mat-option *ngFor=\"let item of profiles\" [value]=\"item\">\n                {{ ('USER.PROFILE_ENUM.' + item) | uppercase |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['mainProfile'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='status'\">\n          <mat-form-field>\n<!--            <ion-icon matPrefix *ngIf=\"row.validator.controls['statusId'].value &gt;=0\" [name]=\"statusById[row.validator.controls['statusId'].value]?.icon\"></ion-icon>-->\n\n            <mat-select [formControl]=\"row.validator.controls['statusId']\"\n                        [placeholder]=\"'REFERENTIAL.STATUS'|translate\">\n              <mat-select-trigger>\n                <span *ngIf=\"row.validator.controls['statusId'].value &gt;=0\">\n                  {{ statusById[row.validator.controls['statusId'].value]?.label | translate}}</span>\n              </mat-select-trigger>\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                {{ item.label |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- username -->\n      <ng-container matColumnDef=\"username\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='username'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls.username\"\n                   [placeholder]=\"'USER.USERNAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='username'\">\n            <mat-error *ngIf=\"row.validator.controls.username.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'username')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- username extranet -->\n      <ng-container matColumnDef=\"usernameExtranet\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME_EXTRANET</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='usernameExtranet'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls.usernameExtranet\"\n                   [placeholder]=\"'USER.USERNAME_EXTRANET'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='usernameExtranet'\">\n            <mat-error *ngIf=\"row.validator.controls.usernameExtranet.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'usernameExtranet')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- pubkey  -->\n      <ng-container matColumnDef=\"pubkey\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.PUBKEY</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            [title]=\"row.validator.controls.pubkey.valueChanges|async\"\n            (click)=\"focusColumn='pubkey'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls['pubkey']\" [placeholder]=\"'USER.PUBKEY'|translate\"\n                   [readonly]=\"!row.editing\" autocomplete=\"off\">\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('pubkey')\">\n              <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'pubkey')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"useSticky\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmEditCreateClick)=\"confirmEditCreate($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [canCancel]=\"false\">\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator.invalid\"\n          [class.mat-row-dirty]=\"row.currentData.dirty\"\n          [class.mat-row-disabled]=\"!row.editing\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"!row.validator?.valid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <mat-paginator class=\"mat-paginator-footer\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\"\n                 [pageSizeOptions]=\"defaultPageSizeOptions\" showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"!mobile && canEdit\"\n                        (onCancel)=\"onRefresh.emit()\" (onSave)=\"save()\" [disabled]=\"(loadingSubject|async) || !dirty\">\n\n    <!-- error -->\n    <ion-item *ngIf=\"(errorSubject | async); let error\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow()\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-expansion-panel{margin-bottom:5px}.mat-expansion-panel .form-container mat-form-field{width:100%}.mat-expansion-panel mat-action-row ion-label{line-height:36px}.table-container{height:100%}.mat-table .mat-cell .avatar{height:40px;width:40px;margin:2px 0 0;background-size:cover;background-repeat:no-repeat;background-position:center}.mat-table .mat-column-id{width:30px}.mat-table .mat-column-avatar{width:50px}.mat-table .mat-column-avatar .avatar{border-radius:5px;border:solid 1px rgba(var(--ion-color-secondary-rgb),.5)}.mat-table .mat-column-lastName,.mat-table .mat-column-firstName{min-width:80px}.mat-table .mat-column-email,.mat-table .mat-column-pubkey,.mat-table .mat-column-department{min-width:180px}.mat-table .mat-column-profile{min-width:110px}.mat-table .mat-column-status{min-width:130px}\n"], dependencies: [{ kind: "directive", type: i4$2.SvgJdenticonDirective, selector: "svg[data-jdenticon-hash],svg[data-jdenticon-value]", inputs: ["data-jdenticon-hash", "data-jdenticon-value", "width", "height"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i14$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i9$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "[appAutoTitle]" }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "clearable", "chipColor", "debug", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave", "showSaveAndClose", "showSaveAndNext"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["title", "enable", "expanded"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], animations: [slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.6", type: UsersPage, selector: "app-users-table", inputs: { useSticky: "useSticky" }, providers: [{ provide: ValidatorService, useExisting: PersonValidatorService }], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar [title]=\"'USER.LIST.TITLE'|translate\"\n             color=\"primary\"\n             [canGoBack]=\"false\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\">\n  <ion-buttons slot=\"end\">\n\n    <!-- Compose message -->\n    <button mat-icon-button *ngIf=\"canSendMessage\"\n            [title]=\"'USER.LIST.BTN_SEND_MESSAGE'|translate\"\n            (click)=\"openComposeMessageModal($event)\">\n      <ion-icon name=\"mail\" slot=\"icon-only\"></ion-icon>\n    </button>\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- Refresh -->\n      <button mat-icon-button *ngIf=\"!mobile\"\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"onRefresh.emit()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\"\n                  aria-hidden=\"false\"\n        >filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n    </ng-container>\n\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              class=\"hidden-xs hidden-sm\"\n              [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- error -->\n  <ion-item *ngIf=\"errorSubject|async ; let error\" lines=\"none\"\n            class=\"hidden-sm hidden-xs hidden-mobile\"\n            @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <!-- debug -->\n  <app-debug *ngIf=\"debug\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col>\n          focusColumn: {{focusColumn}}<br/>\n          loadingSubject: {{loading}}<br/>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"ion-no-padding filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{ 'USER.LIST.FILTER.SEARCH'|translate }}</mat-label>\n              <input matInput formControlName=\"searchText\">\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- status -->\n            <mat-form-field>\n              <mat-label>{{ 'USER.STATUS' | translate }}</mat-label>\n              <mat-select formControlName=\"statusId\">\n                <mat-option [value]=\"null\"><i><span translate>COMMON.EMPTY_OPTION</span></i></mat-option>\n                <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                  <ion-icon [name]=\"item.icon\"></ion-icon>\n                  {{ item.label |translate }}\n                </mat-option>\n              </mat-select>\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.statusId)\"\n                      [hidden]=\"filterForm.controls.statusId.disabled || !filterForm.controls.statusId.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && (errorSubject | async); let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"table-container\">\n    <table #table mat-table matSort\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\" [matSortDirection]=\"defaultSortDirection\"\n           matSortDisableClear [trackBy]=\"trackByFn\">\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (click)=\"toggleSelectRow($event, row)\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData.id }}</td>\n      </ng-container>\n\n      <!-- avatar Column -->\n      <ng-container matColumnDef=\"avatar\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <div class=\"avatar\" *ngIf=\"row.currentData.avatar; else generateIcon\"\n               [ngStyle]=\"{'background-image':'url('+row.currentData.avatar+')'}\"></div>\n          <ng-template #generateIcon>\n            <div class=\"avatar\">\n              <svg width=\"38\" [data-jdenticon-value]=\"row.currentData.id\"></svg>\n            </div>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- lastName  -->\n      <ng-container matColumnDef=\"lastName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.LAST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='lastName'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput\n                   [formControl]=\"row.validator.controls['lastName']\"\n                   [placeholder]=\"'USER.LAST_NAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='lastName'\">\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'lastName')}}\n            </ion-label>\n          </ng-template>\n        </td>\n\n      </ng-container>\n\n      <!-- firstname -->\n      <ng-container matColumnDef=\"firstName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.FIRST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='firstName'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls['firstName']\"\n                   [placeholder]=\"'USER.FIRST_NAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='firstName'\">\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'firstName')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- email  -->\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.EMAIL</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='email'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls['email']\"\n                   [placeholder]=\"'USER.EMAIL'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='email'\">\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('email')\">\n              <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'email')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- additional fields -->\n      <ng-container *ngFor=\"let definition of additionalFields\" [matColumnDef]=\"definition.key\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span>{{definition.label|translate}}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn=definition.key\">\n          <app-form-field floatLabel=\"never\"\n                          [definition]=\"definition\"\n                          [formControl]=\"row.validator.controls[definition.key]\"\n                          [required]=\"definition.extra?.account?.required\"\n                          [autofocus]=\"row.editing && focusColumn===definition.key\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- profile column  -->\n      <ng-container matColumnDef=\"profile\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.PROFILE</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='profile'\">\n          <mat-form-field>\n            <mat-select [formControl]=\"row.validator.controls['mainProfile']\"\n                        [placeholder]=\"'USER.PROFILE'|translate\">\n              <mat-option *ngFor=\"let item of profiles\" [value]=\"item\">\n                {{ ('USER.PROFILE_ENUM.' + item) | uppercase |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['mainProfile'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='status'\">\n          <mat-form-field>\n<!--            <ion-icon matPrefix *ngIf=\"row.validator.controls['statusId'].value &gt;=0\" [name]=\"statusById[row.validator.controls['statusId'].value]?.icon\"></ion-icon>-->\n\n            <mat-select [formControl]=\"row.validator.controls['statusId']\"\n                        [placeholder]=\"'REFERENTIAL.STATUS'|translate\">\n              <mat-select-trigger>\n                <span *ngIf=\"row.validator.controls['statusId'].value &gt;=0\">\n                  {{ statusById[row.validator.controls['statusId'].value]?.label | translate}}</span>\n              </mat-select-trigger>\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                {{ item.label |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- username -->\n      <ng-container matColumnDef=\"username\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='username'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls.username\"\n                   [placeholder]=\"'USER.USERNAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='username'\">\n            <mat-error *ngIf=\"row.validator.controls.username.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'username')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- username extranet -->\n      <ng-container matColumnDef=\"usernameExtranet\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME_EXTRANET</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='usernameExtranet'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls.usernameExtranet\"\n                   [placeholder]=\"'USER.USERNAME_EXTRANET'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='usernameExtranet'\">\n            <mat-error *ngIf=\"row.validator.controls.usernameExtranet.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'usernameExtranet')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- pubkey  -->\n      <ng-container matColumnDef=\"pubkey\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.PUBKEY</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            [title]=\"row.validator.controls.pubkey.valueChanges|async\"\n            (click)=\"focusColumn='pubkey'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls['pubkey']\" [placeholder]=\"'USER.PUBKEY'|translate\"\n                   [readonly]=\"!row.editing\" autocomplete=\"off\">\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('pubkey')\">\n              <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'pubkey')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"useSticky\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmEditCreateClick)=\"confirmEditCreate($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [canCancel]=\"false\">\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator.invalid\"\n          [class.mat-row-dirty]=\"row.currentData.dirty\"\n          [class.mat-row-disabled]=\"!row.editing\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"!row.validator?.valid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <mat-paginator [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\"\n                 [pageSizeOptions]=\"defaultPageSizeOptions\" showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"!mobile && canEdit\"\n                        (onCancel)=\"onRefresh.emit()\" (onSave)=\"save()\" [disabled]=\"(loadingSubject|async) || !dirty\">\n\n    <!-- error -->\n    <ion-item *ngIf=\"(errorSubject | async); let error\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow()\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-expansion-panel{margin-bottom:5px}.mat-expansion-panel .form-container mat-form-field{width:100%}.mat-expansion-panel mat-action-row ion-label{line-height:36px}.table-container{height:100%}.mat-table .mat-cell .avatar{height:40px;width:40px;margin:2px 0 0;background-size:cover;background-repeat:no-repeat;background-position:center}.mat-table .mat-column-id{width:30px}.mat-table .mat-column-avatar{width:50px}.mat-table .mat-column-avatar .avatar{border-radius:5px;border:solid 1px rgba(var(--ion-color-secondary-rgb),.5)}.mat-table .mat-column-lastName,.mat-table .mat-column-firstName{min-width:80px}.mat-table .mat-column-email,.mat-table .mat-column-pubkey,.mat-table .mat-column-department{min-width:180px}.mat-table .mat-column-profile{min-width:110px}.mat-table .mat-column-status{min-width:130px}\n"], dependencies: [{ kind: "directive", type: i4$2.SvgJdenticonDirective, selector: "svg[data-jdenticon-hash],svg[data-jdenticon-value]", inputs: ["data-jdenticon-hash", "data-jdenticon-value", "width", "height"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i14$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i9$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i8$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "[appAutoTitle]" }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "required", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "floatLabel", "tabindex", "autofocus", "clearable", "chipColor", "debug", "class"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave", "showSaveAndClose", "showSaveAndNext"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["title", "enable", "expanded"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], animations: [slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: UsersPage, decorators: [{
             type: Component,
-            args: [{ selector: 'app-users-table', providers: [{ provide: ValidatorService, useExisting: PersonValidatorService }], animations: [slideUpDownAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar [title]=\"'USER.LIST.TITLE'|translate\"\n             color=\"primary\"\n             [canGoBack]=\"false\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\">\n  <ion-buttons slot=\"end\">\n\n    <!-- Compose message -->\n    <button mat-icon-button *ngIf=\"canSendMessage\"\n            [title]=\"'USER.LIST.BTN_SEND_MESSAGE'|translate\"\n            (click)=\"openComposeMessageModal($event)\">\n      <ion-icon name=\"mail\" slot=\"icon-only\"></ion-icon>\n    </button>\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- Refresh -->\n      <button mat-icon-button *ngIf=\"!mobile\"\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"onRefresh.emit()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\">filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n    </ng-container>\n\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              class=\"hidden-xs hidden-sm\"\n              [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- error -->\n  <ion-item *ngIf=\"errorSubject|async ; let error\" lines=\"none\"\n            class=\"hidden-sm hidden-xs hidden-mobile\"\n            @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <!-- debug -->\n  <app-debug *ngIf=\"debug\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col>\n          focusColumn: {{focusColumn}}<br/>\n          loadingSubject: {{loading}}<br/>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"ion-no-padding filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{ 'USER.LIST.FILTER.SEARCH'|translate }}</mat-label>\n              <input matInput formControlName=\"searchText\">\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- status -->\n            <mat-form-field>\n              <mat-select formControlName=\"statusId\" [placeholder]=\"'USER.STATUS'|translate\">\n                <mat-option [value]=\"null\"><i><span translate>COMMON.EMPTY_OPTION</span></i></mat-option>\n                <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                  <ion-icon [name]=\"item.icon\"></ion-icon>\n                  {{ item.label |translate }}\n                </mat-option>\n              </mat-select>\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.statusId)\"\n                      [hidden]=\"filterForm.controls.statusId.disabled || !filterForm.controls.statusId.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && (errorSubject | async); let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"table-container\">\n    <table #table mat-table matSort\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\" [matSortDirection]=\"defaultSortDirection\"\n           matSortDisableClear [trackBy]=\"trackByFn\">\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (click)=\"toggleSelectRow($event, row)\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData.id }}</td>\n      </ng-container>\n\n      <!-- avatar Column -->\n      <ng-container matColumnDef=\"avatar\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <div class=\"avatar\" *ngIf=\"row.currentData.avatar; else generateIcon\"\n               [ngStyle]=\"{'background-image':'url('+row.currentData.avatar+')'}\"></div>\n          <ng-template #generateIcon>\n            <div class=\"avatar\">\n              <svg width=\"38\" [data-jdenticon-value]=\"row.currentData.id\"></svg>\n            </div>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- lastName  -->\n      <ng-container matColumnDef=\"lastName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.LAST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='lastName'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput\n                   [formControl]=\"row.validator.controls['lastName']\"\n                   [placeholder]=\"'USER.LAST_NAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='lastName'\">\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'lastName')}}\n            </ion-label>\n          </ng-template>\n        </td>\n\n      </ng-container>\n\n      <!-- firstname -->\n      <ng-container matColumnDef=\"firstName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.FIRST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='firstName'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls['firstName']\"\n                   [placeholder]=\"'USER.FIRST_NAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='firstName'\">\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'firstName')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- email  -->\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.EMAIL</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='email'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls['email']\"\n                   [placeholder]=\"'USER.EMAIL'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='email'\">\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('email')\">\n              <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'email')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- additional fields -->\n      <ng-container *ngFor=\"let definition of additionalFields\" [matColumnDef]=\"definition.key\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span>{{definition.label|translate}}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn=definition.key\">\n          <app-form-field floatLabel=\"never\"\n                          [definition]=\"definition\"\n                          [formControl]=\"row.validator.controls[definition.key]\"\n                          [required]=\"definition.extra?.account?.required\"\n                          [autofocus]=\"row.editing && focusColumn===definition.key\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- profile column  -->\n      <ng-container matColumnDef=\"profile\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.PROFILE</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='profile'\">\n          <mat-form-field>\n            <mat-select [formControl]=\"row.validator.controls['mainProfile']\"\n                        [placeholder]=\"'USER.PROFILE'|translate\">\n              <mat-option *ngFor=\"let item of profiles\" [value]=\"item\">\n                {{ ('USER.PROFILE_ENUM.' + item) | uppercase |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['mainProfile'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='status'\">\n          <mat-form-field>\n<!--            <ion-icon matPrefix *ngIf=\"row.validator.controls['statusId'].value &gt;=0\" [name]=\"statusById[row.validator.controls['statusId'].value]?.icon\"></ion-icon>-->\n\n            <mat-select [formControl]=\"row.validator.controls['statusId']\"\n                        [placeholder]=\"'REFERENTIAL.STATUS'|translate\">\n              <mat-select-trigger>\n                <span *ngIf=\"row.validator.controls['statusId'].value &gt;=0\">\n                  {{ statusById[row.validator.controls['statusId'].value]?.label | translate}}</span>\n              </mat-select-trigger>\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                {{ item.label |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- username -->\n      <ng-container matColumnDef=\"username\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='username'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls.username\"\n                   [placeholder]=\"'USER.USERNAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='username'\">\n            <mat-error *ngIf=\"row.validator.controls.username.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'username')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- username extranet -->\n      <ng-container matColumnDef=\"usernameExtranet\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME_EXTRANET</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='usernameExtranet'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls.usernameExtranet\"\n                   [placeholder]=\"'USER.USERNAME_EXTRANET'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='usernameExtranet'\">\n            <mat-error *ngIf=\"row.validator.controls.usernameExtranet.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'usernameExtranet')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- pubkey  -->\n      <ng-container matColumnDef=\"pubkey\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.PUBKEY</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            [title]=\"row.validator.controls.pubkey.valueChanges|async\"\n            (click)=\"focusColumn='pubkey'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls['pubkey']\" [placeholder]=\"'USER.PUBKEY'|translate\"\n                   [readonly]=\"!row.editing\" autocomplete=\"off\">\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('pubkey')\">\n              <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'pubkey')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"useSticky\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmEditCreateClick)=\"confirmEditCreate($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [canCancel]=\"false\">\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator.invalid\"\n          [class.mat-row-dirty]=\"row.currentData.dirty\"\n          [class.mat-row-disabled]=\"!row.editing\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"!row.validator?.valid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <mat-paginator class=\"mat-paginator-footer\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\"\n                 [pageSizeOptions]=\"defaultPageSizeOptions\" showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"!mobile && canEdit\"\n                        (onCancel)=\"onRefresh.emit()\" (onSave)=\"save()\" [disabled]=\"(loadingSubject|async) || !dirty\">\n\n    <!-- error -->\n    <ion-item *ngIf=\"(errorSubject | async); let error\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow()\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-expansion-panel{margin-bottom:5px}.mat-expansion-panel .form-container mat-form-field{width:100%}.mat-expansion-panel mat-action-row ion-label{line-height:36px}.table-container{height:100%}.mat-table .mat-cell .avatar{height:40px;width:40px;margin:2px 0 0;background-size:cover;background-repeat:no-repeat;background-position:center}.mat-table .mat-column-id{width:30px}.mat-table .mat-column-avatar{width:50px}.mat-table .mat-column-avatar .avatar{border-radius:5px;border:solid 1px rgba(var(--ion-color-secondary-rgb),.5)}.mat-table .mat-column-lastName,.mat-table .mat-column-firstName{min-width:80px}.mat-table .mat-column-email,.mat-table .mat-column-pubkey,.mat-table .mat-column-department{min-width:180px}.mat-table .mat-column-profile{min-width:110px}.mat-table .mat-column-status{min-width:130px}\n"] }]
+            args: [{ selector: 'app-users-table', providers: [{ provide: ValidatorService, useExisting: PersonValidatorService }], animations: [slideUpDownAnimation], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar [title]=\"'USER.LIST.TITLE'|translate\"\n             color=\"primary\"\n             [canGoBack]=\"false\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\">\n  <ion-buttons slot=\"end\">\n\n    <!-- Compose message -->\n    <button mat-icon-button *ngIf=\"canSendMessage\"\n            [title]=\"'USER.LIST.BTN_SEND_MESSAGE'|translate\"\n            (click)=\"openComposeMessageModal($event)\">\n      <ion-icon name=\"mail\" slot=\"icon-only\"></ion-icon>\n    </button>\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- Refresh -->\n      <button mat-icon-button *ngIf=\"!mobile\"\n              [title]=\"'COMMON.BTN_REFRESH'|translate\"\n              (click)=\"onRefresh.emit()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\"\n                  aria-hidden=\"false\"\n        >filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n    </ng-container>\n\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              class=\"hidden-xs hidden-sm\"\n              [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n\n  <!-- error -->\n  <ion-item *ngIf=\"errorSubject|async ; let error\" lines=\"none\"\n            class=\"hidden-sm hidden-xs hidden-mobile\"\n            @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <!-- debug -->\n  <app-debug *ngIf=\"debug\">\n    <ion-grid class=\"ion-no-padding\">\n      <ion-row>\n        <ion-col>\n          focusColumn: {{focusColumn}}<br/>\n          loadingSubject: {{loading}}<br/>\n        </ion-col>\n      </ion-row>\n    </ion-grid>\n  </app-debug>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"ion-no-padding filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding\" [formGroup]=\"filterForm\" (ngSubmit)=\"onRefresh.emit()\">\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search -->\n            <mat-form-field>\n              <mat-label>{{ 'USER.LIST.FILTER.SEARCH'|translate }}</mat-label>\n              <input matInput formControlName=\"searchText\">\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- status -->\n            <mat-form-field>\n              <mat-label>{{ 'USER.STATUS' | translate }}</mat-label>\n              <mat-select formControlName=\"statusId\">\n                <mat-option [value]=\"null\"><i><span translate>COMMON.EMPTY_OPTION</span></i></mat-option>\n                <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                  <ion-icon [name]=\"item.icon\"></ion-icon>\n                  {{ item.label |translate }}\n                </mat-option>\n              </mat-select>\n\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.statusId)\"\n                      [hidden]=\"filterForm.controls.statusId.disabled || !filterForm.controls.statusId.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && (errorSubject | async); let error\" lines=\"none\">\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <div class=\"table-container\">\n    <table #table mat-table matSort\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\" [matSortDirection]=\"defaultSortDirection\"\n           matSortDisableClear [trackBy]=\"trackByFn\">\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox (click)=\"toggleSelectRow($event, row)\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData.id }}</td>\n      </ng-container>\n\n      <!-- avatar Column -->\n      <ng-container matColumnDef=\"avatar\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <div class=\"avatar\" *ngIf=\"row.currentData.avatar; else generateIcon\"\n               [ngStyle]=\"{'background-image':'url('+row.currentData.avatar+')'}\"></div>\n          <ng-template #generateIcon>\n            <div class=\"avatar\">\n              <svg width=\"38\" [data-jdenticon-value]=\"row.currentData.id\"></svg>\n            </div>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- lastName  -->\n      <ng-container matColumnDef=\"lastName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.LAST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='lastName'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput\n                   [formControl]=\"row.validator.controls['lastName']\"\n                   [placeholder]=\"'USER.LAST_NAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='lastName'\">\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'lastName')}}\n            </ion-label>\n          </ng-template>\n        </td>\n\n      </ng-container>\n\n      <!-- firstname -->\n      <ng-container matColumnDef=\"firstName\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.FIRST_NAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='firstName'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls['firstName']\"\n                   [placeholder]=\"'USER.FIRST_NAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='firstName'\">\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('minlength')\">\n              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'firstName')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- email  -->\n      <ng-container matColumnDef=\"email\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.EMAIL</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='email'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls['email']\"\n                   [placeholder]=\"'USER.EMAIL'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='email'\">\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls['email'].hasError('email')\">\n              <span translate>ERROR.FIELD_NOT_VALID_EMAIL</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'email')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- additional fields -->\n      <ng-container *ngFor=\"let definition of additionalFields\" [matColumnDef]=\"definition.key\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span>{{definition.label|translate}}</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn=definition.key\">\n          <app-form-field floatLabel=\"never\"\n                          [definition]=\"definition\"\n                          [formControl]=\"row.validator.controls[definition.key]\"\n                          [required]=\"definition.extra?.account?.required\"\n                          [autofocus]=\"row.editing && focusColumn===definition.key\">\n          </app-form-field>\n        </td>\n      </ng-container>\n\n      <!-- profile column  -->\n      <ng-container matColumnDef=\"profile\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.PROFILE</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='profile'\">\n          <mat-form-field>\n            <mat-select [formControl]=\"row.validator.controls['mainProfile']\"\n                        [placeholder]=\"'USER.PROFILE'|translate\">\n              <mat-option *ngFor=\"let item of profiles\" [value]=\"item\">\n                {{ ('USER.PROFILE_ENUM.' + item) | uppercase |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['mainProfile'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"status\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='status'\">\n          <mat-form-field>\n<!--            <ion-icon matPrefix *ngIf=\"row.validator.controls['statusId'].value &gt;=0\" [name]=\"statusById[row.validator.controls['statusId'].value]?.icon\"></ion-icon>-->\n\n            <mat-select [formControl]=\"row.validator.controls['statusId']\"\n                        [placeholder]=\"'REFERENTIAL.STATUS'|translate\">\n              <mat-select-trigger>\n                <span *ngIf=\"row.validator.controls['statusId'].value &gt;=0\">\n                  {{ statusById[row.validator.controls['statusId'].value]?.label | translate}}</span>\n              </mat-select-trigger>\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                {{ item.label |translate }}\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- username -->\n      <ng-container matColumnDef=\"username\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='username'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls.username\"\n                   [placeholder]=\"'USER.USERNAME'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='username'\">\n            <mat-error *ngIf=\"row.validator.controls.username.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'username')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- username extranet -->\n      <ng-container matColumnDef=\"usernameExtranet\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.USERNAME_EXTRANET</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='usernameExtranet'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls.usernameExtranet\"\n                   [placeholder]=\"'USER.USERNAME_EXTRANET'|translate\"\n                   [readonly]=\"!row.editing\"\n                   [appAutofocus]=\"row.editing && focusColumn==='usernameExtranet'\">\n            <mat-error *ngIf=\"row.validator.controls.usernameExtranet.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'usernameExtranet')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- pubkey  -->\n      <ng-container matColumnDef=\"pubkey\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <span translate>USER.PUBKEY</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            [title]=\"row.validator.controls.pubkey.valueChanges|async\"\n            (click)=\"focusColumn='pubkey'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput [formControl]=\"row.validator.controls['pubkey']\" [placeholder]=\"'USER.PUBKEY'|translate\"\n                   [readonly]=\"!row.editing\" autocomplete=\"off\">\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('pubkey')\">\n              <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'pubkey')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"useSticky\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmEditCreateClick)=\"confirmEditCreate($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [canCancel]=\"false\">\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator.invalid\"\n          [class.mat-row-dirty]=\"row.currentData.dirty\"\n          [class.mat-row-disabled]=\"!row.editing\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"!row.validator?.valid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <mat-paginator [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\"\n                 [pageSizeOptions]=\"defaultPageSizeOptions\" showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"!mobile && canEdit\"\n                        (onCancel)=\"onRefresh.emit()\" (onSave)=\"save()\" [disabled]=\"(loadingSubject|async) || !dirty\">\n\n    <!-- error -->\n    <ion-item *ngIf=\"(errorSubject | async); let error\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error | translate\"></ion-label>\n    </ion-item>\n\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow()\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-expansion-panel{margin-bottom:5px}.mat-expansion-panel .form-container mat-form-field{width:100%}.mat-expansion-panel mat-action-row ion-label{line-height:36px}.table-container{height:100%}.mat-table .mat-cell .avatar{height:40px;width:40px;margin:2px 0 0;background-size:cover;background-repeat:no-repeat;background-position:center}.mat-table .mat-column-id{width:30px}.mat-table .mat-column-avatar{width:50px}.mat-table .mat-column-avatar .avatar{border-radius:5px;border:solid 1px rgba(var(--ion-color-secondary-rgb),.5)}.mat-table .mat-column-lastName,.mat-table .mat-column-firstName{min-width:80px}.mat-table .mat-column-email,.mat-table .mat-column-pubkey,.mat-table .mat-column-department{min-width:180px}.mat-table .mat-column-profile{min-width:110px}.mat-table .mat-column-status{min-width:130px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$2.UntypedFormBuilder }, { type: AccountService }, { type: i2$8.ValidatorService }, { type: ConfigService }, { type: PersonService }, { type: MessageService }, { type: MenuService }, { type: i0.ChangeDetectorRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [ENVIRONMENT]
@@ -41362,7 +41367,7 @@ class TableTestPage extends AppTable {
             {
                 provide: AppTable, useExisting: forwardRef(() => TableTestPage),
             }
-        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar color=\"primary\" [canGoBack]=\"true\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\"\n             [backHref]=\"'/testing'\">\n  <ion-title>Table (click to edit)</ion-title>\n  <ion-buttons slot=\"end\">\n\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n\n      <input matInput type=\"number\" step=\"1\" style=\"color:black; width: 50px;\" [(ngModel)]=\"rowHeight\">\n\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\">filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\"\n              [disabled]=\"!(dirtySubject|async)\"\n              (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    </ng-container>\n\n    <!-- if row selection -->\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              *ngIf=\"canEdit\" [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && selection.selected | isArrayLength: {equals: 1}\"\n              [title]=\"'COMMON.BTN_DUPLICATE'|translate\"\n              (click)=\"duplicateRow($event, selection.selected[0])\">\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{'TABLE.TESTING.SEARCH_TEXT'|translate}}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput\n                     formControlName=\"searchText\"\n                     autocomplete=\"off\">\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\"\n           [style.--mat-row-height]=\"rowHeight + 'px'\">\n    >\n\n      <!-- group header cells -->\n\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\" style=\"background-color: whitesmoke; margin-bottom: -1px;\">\n          <ion-label translate>{{i18nColumnPrefix + 'GROUP_1'}}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{i18nColumnPrefix + 'GROUP_2'}}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" >\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\" [class.mat-column-sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox (click)=\"toggleSelectRow($event, row)\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\" [class.mat-column-sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\n      </ng-container>\n\n      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='label'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\" [hideRequiredMarker]=\"false\">\n            <input matInput autocomplete=\"off\"\n                   [formControl]=\"row.validator.controls['label']\"\n                   [placeholder]=\"'TABLE.TESTING.LABEL'|translate\"\n                   [appAutofocus]=\"row.editing && focusColumn === 'label'\"\n                   [readonly]=\"!row.editing\">\n            <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'label')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='name'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput\n                   [formControl]=\"row.validator?.controls.name\" [placeholder]=\"'TABLE.TESTING.NAME'|translate\"\n                   [appAutofocus]=\"row.editing && focusColumn === 'name'\"\n                   >\n            <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'name')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='levelId'\">\n          <mat-autocomplete-field *ngIf=\"row.editing; else readonlyCell\"\n                                  [formControl]=\"row.validator.controls.levelId\"\n                                  [placeholder]=\"'TABLE.TESTING.LEVEL_ID'|translate\"\n                                  floatLabel=\"never\"\n                                  [config]=\"autocompleteFields.level\"\n                                  [readonly]=\"!row.editing\"\n                                    [autofocus]=\"row.editing && focusColumn === 'levelId'\"\n                                  [required]=\"true\">\n          </mat-autocomplete-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'levelId'|referentialToString: autocompleteFields.level.attributes)}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">\n            <mat-form-field>\n            <mat-select [formControl]=\"row.validator.controls['statusId']\" [placeholder]=\"i18nColumnPrefix + 'STATUS_ID'|translate\">\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                <mat-label>{{ item.label |translate }}</mat-label>\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Enum column  -->\n      <!-- NOTE : Never used in table  -->\n<!--      <ng-container matColumnDef=\"values\">-->\n<!--        <th mat-header-cell *matHeaderCellDef>-->\n<!--          <span translate>Enums</span>-->\n<!--        </th>-->\n<!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\n<!--          <app-form-field-->\n<!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\n<!--            [definition]=\"columnDefinitions['values']\"-->\n<!--          ></app-form-field>-->\n<!--        </td>-->\n<!--      </ng-container>-->\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text color=\"medium\" *ngIf=\"row.id!==-1\">\n            <small>\n              {{ row.validator| formGetValue: 'creationDate' | dateFormat: {time: true} }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input type=\"text\" matInput [formControl]=\"row.validator?.controls.comments\"\n                   [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                   [readonly]=\"!row.editing\">\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <mat-icon class=\"comment\"\n                      *ngIf=\"row.validator?.controls.comments.value\"\n                      [title]=\"row.validator?.controls.comments.value\"></mat-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"true\" [canCancel]=\"false\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns;\" class=\"mat-toolbar\"></tr>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-disabled]=\"!row.editing\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll *ngIf=\"enableInfiniteScroll\"\n                         [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\"\n                         (ionInfinite)=\"fetchMore($event)\">\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS'|translate\">\n      </ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator *ngIf=\"!enableInfiniteScroll\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\"\n                 class=\"mat-paginator-footer\"\n                 showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"canEdit && !mobile\"\n                        (onCancel)=\"load()\"\n                        (onSave)=\"save()\"\n                        [disabled]=\"(loadingSubject|async) || !dirty\">\n    <!-- error -->\n    <ion-item *ngIf=\"error$|async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n         *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table{--mat-column-actions-min-width: 62px;--mat-column-actions-max-width: 62px}.table-container .mat-mdc-table .mat-row-selected{padding:3px}.table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$2.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i14$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i9$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "[appAutoTitle]" }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave", "showSaveAndClose", "showSaveAndNext"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar color=\"primary\" [canGoBack]=\"true\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\"\n             [backHref]=\"'/testing'\">\n  <ion-title>Table (click to edit)</ion-title>\n  <ion-buttons slot=\"end\">\n\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n\n      <input matInput type=\"number\" step=\"1\" style=\"color:black; width: 50px;\" [(ngModel)]=\"rowHeight\">\n\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\"\n                  aria-hidden=\"false\"\n        >filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\"\n              [disabled]=\"!(dirtySubject|async)\"\n              (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    </ng-container>\n\n    <!-- if row selection -->\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              *ngIf=\"canEdit\" [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && selection.selected | isArrayLength: {equals: 1}\"\n              [title]=\"'COMMON.BTN_DUPLICATE'|translate\"\n              (click)=\"duplicateRow($event, selection.selected[0])\">\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{'TABLE.TESTING.SEARCH_TEXT'|translate}}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput\n                     formControlName=\"searchText\"\n                     autocomplete=\"off\">\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\"\n           [style.--mat-row-height]=\"rowHeight + 'px'\">\n    >\n\n      <!-- group header cells -->\n\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\" style=\"background-color: whitesmoke; margin-bottom: -1px;\">\n          <ion-label translate>{{i18nColumnPrefix + 'GROUP_1'}}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{i18nColumnPrefix + 'GROUP_2'}}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" >\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\" [class.mat-column-sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox (click)=\"toggleSelectRow($event, row)\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\" [class.mat-column-sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\n      </ng-container>\n\n      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='label'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\" [hideRequiredMarker]=\"false\">\n            <input matInput autocomplete=\"off\"\n                   [formControl]=\"row.validator.controls['label']\"\n                   [placeholder]=\"'TABLE.TESTING.LABEL'|translate\"\n                   [appAutofocus]=\"row.editing && focusColumn === 'label'\"\n                   [readonly]=\"!row.editing\">\n            <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'label')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='name'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput\n                   [formControl]=\"row.validator?.controls.name\" [placeholder]=\"'TABLE.TESTING.NAME'|translate\"\n                   [appAutofocus]=\"row.editing && focusColumn === 'name'\"\n                   >\n            <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'name')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='levelId'\">\n          <mat-autocomplete-field *ngIf=\"row.editing; else readonlyCell\"\n                                  [formControl]=\"row.validator.controls.levelId\"\n                                  [placeholder]=\"'TABLE.TESTING.LEVEL_ID'|translate\"\n                                  floatLabel=\"never\"\n                                  [config]=\"autocompleteFields.level\"\n                                  [readonly]=\"!row.editing\"\n                                    [autofocus]=\"row.editing && focusColumn === 'levelId'\"\n                                  [required]=\"true\">\n          </mat-autocomplete-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'levelId'|referentialToString: autocompleteFields.level.attributes)}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">\n            <mat-form-field>\n            <mat-select [formControl]=\"row.validator.controls['statusId']\" [placeholder]=\"i18nColumnPrefix + 'STATUS_ID'|translate\">\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                <mat-label>{{ item.label |translate }}</mat-label>\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Enum column  -->\n      <!-- NOTE : Never used in table  -->\n<!--      <ng-container matColumnDef=\"values\">-->\n<!--        <th mat-header-cell *matHeaderCellDef>-->\n<!--          <span translate>Enums</span>-->\n<!--        </th>-->\n<!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\n<!--          <app-form-field-->\n<!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\n<!--            [definition]=\"columnDefinitions['values']\"-->\n<!--          ></app-form-field>-->\n<!--        </td>-->\n<!--      </ng-container>-->\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text color=\"medium\" *ngIf=\"row.id!==-1\">\n            <small>\n              {{ row.validator| formGetValue: 'creationDate' | dateFormat: {time: true} }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input type=\"text\" matInput [formControl]=\"row.validator?.controls.comments\"\n                   [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                   [readonly]=\"!row.editing\">\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <mat-icon class=\"comment\"\n                      *ngIf=\"row.validator?.controls.comments.value\"\n                      [title]=\"row.validator?.controls.comments.value\"></mat-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"true\" [canCancel]=\"false\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns;\" class=\"mat-toolbar\"></tr>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-disabled]=\"!row.editing\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll *ngIf=\"enableInfiniteScroll\"\n                         [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\"\n                         (ionInfinite)=\"fetchMore($event)\">\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS'|translate\">\n      </ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator *ngIf=\"!enableInfiniteScroll\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\"\n                 showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"canEdit && !mobile\"\n                        (onCancel)=\"load()\"\n                        (onSave)=\"save()\"\n                        [disabled]=\"(loadingSubject|async) || !dirty\">\n    <!-- error -->\n    <ion-item *ngIf=\"error$|async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n         *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table{--mat-column-actions-min-width: 62px;--mat-column-actions-max-width: 62px}.table-container .mat-mdc-table .mat-row-selected{padding:3px}.table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$2.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i14$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i9$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i8$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "aria-describedby", "panelClass", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i7$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "[appAutoTitle]" }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave", "showSaveAndClose", "showSaveAndNext"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: TableTestPage, decorators: [{
             type: Component,
@@ -41374,7 +41379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                         {
                             provide: AppTable, useExisting: forwardRef(() => TableTestPage),
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar color=\"primary\" [canGoBack]=\"true\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\"\n             [backHref]=\"'/testing'\">\n  <ion-title>Table (click to edit)</ion-title>\n  <ion-buttons slot=\"end\">\n\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n\n      <input matInput type=\"number\" step=\"1\" style=\"color:black; width: 50px;\" [(ngModel)]=\"rowHeight\">\n\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\">filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\"\n              [disabled]=\"!(dirtySubject|async)\"\n              (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    </ng-container>\n\n    <!-- if row selection -->\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              *ngIf=\"canEdit\" [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && selection.selected | isArrayLength: {equals: 1}\"\n              [title]=\"'COMMON.BTN_DUPLICATE'|translate\"\n              (click)=\"duplicateRow($event, selection.selected[0])\">\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{'TABLE.TESTING.SEARCH_TEXT'|translate}}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput\n                     formControlName=\"searchText\"\n                     autocomplete=\"off\">\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\"\n           [style.--mat-row-height]=\"rowHeight + 'px'\">\n    >\n\n      <!-- group header cells -->\n\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\" style=\"background-color: whitesmoke; margin-bottom: -1px;\">\n          <ion-label translate>{{i18nColumnPrefix + 'GROUP_1'}}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{i18nColumnPrefix + 'GROUP_2'}}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" >\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\" [class.mat-column-sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox (click)=\"toggleSelectRow($event, row)\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\" [class.mat-column-sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\n      </ng-container>\n\n      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='label'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\" [hideRequiredMarker]=\"false\">\n            <input matInput autocomplete=\"off\"\n                   [formControl]=\"row.validator.controls['label']\"\n                   [placeholder]=\"'TABLE.TESTING.LABEL'|translate\"\n                   [appAutofocus]=\"row.editing && focusColumn === 'label'\"\n                   [readonly]=\"!row.editing\">\n            <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'label')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='name'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput\n                   [formControl]=\"row.validator?.controls.name\" [placeholder]=\"'TABLE.TESTING.NAME'|translate\"\n                   [appAutofocus]=\"row.editing && focusColumn === 'name'\"\n                   >\n            <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'name')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='levelId'\">\n          <mat-autocomplete-field *ngIf=\"row.editing; else readonlyCell\"\n                                  [formControl]=\"row.validator.controls.levelId\"\n                                  [placeholder]=\"'TABLE.TESTING.LEVEL_ID'|translate\"\n                                  floatLabel=\"never\"\n                                  [config]=\"autocompleteFields.level\"\n                                  [readonly]=\"!row.editing\"\n                                    [autofocus]=\"row.editing && focusColumn === 'levelId'\"\n                                  [required]=\"true\">\n          </mat-autocomplete-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'levelId'|referentialToString: autocompleteFields.level.attributes)}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">\n            <mat-form-field>\n            <mat-select [formControl]=\"row.validator.controls['statusId']\" [placeholder]=\"i18nColumnPrefix + 'STATUS_ID'|translate\">\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                <mat-label>{{ item.label |translate }}</mat-label>\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Enum column  -->\n      <!-- NOTE : Never used in table  -->\n<!--      <ng-container matColumnDef=\"values\">-->\n<!--        <th mat-header-cell *matHeaderCellDef>-->\n<!--          <span translate>Enums</span>-->\n<!--        </th>-->\n<!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\n<!--          <app-form-field-->\n<!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\n<!--            [definition]=\"columnDefinitions['values']\"-->\n<!--          ></app-form-field>-->\n<!--        </td>-->\n<!--      </ng-container>-->\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text color=\"medium\" *ngIf=\"row.id!==-1\">\n            <small>\n              {{ row.validator| formGetValue: 'creationDate' | dateFormat: {time: true} }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input type=\"text\" matInput [formControl]=\"row.validator?.controls.comments\"\n                   [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                   [readonly]=\"!row.editing\">\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <mat-icon class=\"comment\"\n                      *ngIf=\"row.validator?.controls.comments.value\"\n                      [title]=\"row.validator?.controls.comments.value\"></mat-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"true\" [canCancel]=\"false\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns;\" class=\"mat-toolbar\"></tr>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-disabled]=\"!row.editing\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll *ngIf=\"enableInfiniteScroll\"\n                         [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\"\n                         (ionInfinite)=\"fetchMore($event)\">\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS'|translate\">\n      </ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator *ngIf=\"!enableInfiniteScroll\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\"\n                 class=\"mat-paginator-footer\"\n                 showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"canEdit && !mobile\"\n                        (onCancel)=\"load()\"\n                        (onSave)=\"save()\"\n                        [disabled]=\"(loadingSubject|async) || !dirty\">\n    <!-- error -->\n    <ion-item *ngIf=\"error$|async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n         *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table{--mat-column-actions-min-width: 62px;--mat-column-actions-max-width: 62px}.table-container .mat-mdc-table .mat-row-selected{padding:3px}.table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar color=\"primary\" [canGoBack]=\"true\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\"\n             [backHref]=\"'/testing'\">\n  <ion-title>Table (click to edit)</ion-title>\n  <ion-buttons slot=\"end\">\n\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n\n      <input matInput type=\"number\" step=\"1\" style=\"color:black; width: 50px;\" [(ngModel)]=\"rowHeight\">\n\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\"\n                  aria-hidden=\"false\"\n        >filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\"\n              [disabled]=\"!(dirtySubject|async)\"\n              (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n\n      <!-- start/stop timer to auto-load data -->\n      <ion-button *ngIf=\"!timer\" (click)=\"startTimer()\">Start reload</ion-button>\n      <ion-button *ngIf=\"timer\" (click)=\"stopTimer()\" color=\"accent\">Stop reload</ion-button>\n    </ng-container>\n\n    <!-- if row selection -->\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              *ngIf=\"canEdit\" [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && selection.selected | isArrayLength: {equals: 1}\"\n              [title]=\"'COMMON.BTN_DUPLICATE'|translate\"\n              (click)=\"duplicateRow($event, selection.selected[0])\">\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{'TABLE.TESTING.SEARCH_TEXT'|translate}}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput\n                     formControlName=\"searchText\"\n                     autocomplete=\"off\">\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\"\n           [style.--mat-row-height]=\"rowHeight + 'px'\">\n    >\n\n      <!-- group header cells -->\n\n      <ng-container matColumnDef=\"top-start\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\" [attr.colspan]=\"2\">\n          <!-- start spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-1\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\" style=\"background-color: whitesmoke; margin-bottom: -1px;\">\n          <ion-label translate>{{i18nColumnPrefix + 'GROUP_1'}}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"group-2\">\n        <th mat-header-cell *matHeaderCellDef [attr.colspan]=\"3\">\n          <ion-label translate>{{i18nColumnPrefix + 'GROUP_2'}}</ion-label>\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"top-end\" >\n        <th mat-header-cell *matHeaderCellDef>\n          <!-- end spacer -->\n        </th>\n      </ng-container>\n\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\" [class.mat-column-sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\"\n                        [indeterminate]=\"selection.hasValue() && !isAllSelected()\">\n          </mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox (click)=\"toggleSelectRow($event, row)\" [checked]=\"selection.isSelected(row)\">\n          </mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\" [class.mat-column-sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">{{ row.currentData?.id }}</td>\n      </ng-container>\n\n      <!-- Label column -->\n      <ng-container matColumnDef=\"label\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LABEL</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='label'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\" [hideRequiredMarker]=\"false\">\n            <input matInput autocomplete=\"off\"\n                   [formControl]=\"row.validator.controls['label']\"\n                   [placeholder]=\"'TABLE.TESTING.LABEL'|translate\"\n                   [appAutofocus]=\"row.editing && focusColumn === 'label'\"\n                   [readonly]=\"!row.editing\">\n            <mat-error *ngIf=\"row.validator.controls['label'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'label')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.NAME</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\"\n            (click)=\"focusColumn='name'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input matInput\n                   [formControl]=\"row.validator?.controls.name\" [placeholder]=\"'TABLE.TESTING.NAME'|translate\"\n                   [appAutofocus]=\"row.editing && focusColumn === 'name'\"\n                   >\n            <mat-error *ngIf=\"row.validator?.controls.name.hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'name')}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn='levelId'\">\n          <mat-autocomplete-field *ngIf=\"row.editing; else readonlyCell\"\n                                  [formControl]=\"row.validator.controls.levelId\"\n                                  [placeholder]=\"'TABLE.TESTING.LEVEL_ID'|translate\"\n                                  floatLabel=\"never\"\n                                  [config]=\"autocompleteFields.level\"\n                                  [readonly]=\"!row.editing\"\n                                    [autofocus]=\"row.editing && focusColumn === 'levelId'\"\n                                  [required]=\"true\">\n          </mat-autocomplete-field>\n          <ng-template #readonlyCell>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'levelId'|referentialToString: autocompleteFields.level.attributes)}}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Status column  -->\n      <ng-container matColumnDef=\"statusId\">\n        <th mat-header-cell *matHeaderCellDef>\n          <span translate>USER.STATUS</span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">\n            <mat-form-field>\n            <mat-select [formControl]=\"row.validator.controls['statusId']\" [placeholder]=\"i18nColumnPrefix + 'STATUS_ID'|translate\">\n              <mat-option *ngFor=\"let item of statusList\" [value]=\"item.id\">\n                <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                <mat-label>{{ item.label |translate }}</mat-label>\n              </mat-option>\n            </mat-select>\n            <mat-error *ngIf=\"row.validator.controls['statusId'].hasError('required')\" translate>ERROR.FIELD_REQUIRED</mat-error>\n          </mat-form-field>\n        </td>\n      </ng-container>\n\n      <!-- Enum column  -->\n      <!-- NOTE : Never used in table  -->\n<!--      <ng-container matColumnDef=\"values\">-->\n<!--        <th mat-header-cell *matHeaderCellDef>-->\n<!--          <span translate>Enums</span>-->\n<!--        </th>-->\n<!--        <td mat-cell *matCellDef=\"let row\" [class.mat-form-field-disabled]=\"!row.editing\">-->\n<!--          <app-form-field-->\n<!--            [formControl]=\"row.validator|formGetControl:'properties.values'\"-->\n<!--            [definition]=\"columnDefinitions['values']\"-->\n<!--          ></app-form-field>-->\n<!--        </td>-->\n<!--      </ng-container>-->\n\n      <!-- Creation date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text color=\"medium\" *ngIf=\"row.id!==-1\">\n            <small>\n              {{ row.validator| formGetValue: 'creationDate' | dateFormat: {time: true} }}\n            </small>\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Comment column -->\n      <ng-container matColumnDef=\"comments\">\n        <th mat-header-cell *matHeaderCellDef>\n          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"row.editing; else iconComment\">\n            <!--<textarea matInput [formControl]=\"row.validator?.controls.comments\"\n                      [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                      [readonly]=\"!row.editing\"></textarea>-->\n\n            <input type=\"text\" matInput [formControl]=\"row.validator?.controls.comments\"\n                   [placeholder]=\"'TABLE.TESTING.COMMENTS'|translate\"\n                   [readonly]=\"!row.editing\">\n          </mat-form-field>\n\n          <ng-template #iconComment>\n            <mat-icon class=\"comment\"\n                      *ngIf=\"row.validator?.controls.comments.value\"\n                      [title]=\"row.validator?.controls.comments.value\"></mat-icon>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"true\" [canCancel]=\"false\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"groupColumns;\" class=\"mat-toolbar\"></tr>\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-disabled]=\"!row.editing\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll *ngIf=\"enableInfiniteScroll\"\n                         [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\"\n                         (ionInfinite)=\"fetchMore($event)\">\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS'|translate\">\n      </ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator *ngIf=\"!enableInfiniteScroll\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\"\n                 showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"canEdit && !mobile\"\n                        (onCancel)=\"load()\"\n                        (onSave)=\"save()\"\n                        [disabled]=\"(loadingSubject|async) || !dirty\">\n    <!-- error -->\n    <ion-item *ngIf=\"error$|async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n         *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table{--mat-column-actions-min-width: 62px;--mat-column-actions-max-width: 62px}.table-container .mat-mdc-table .mat-row-selected{padding:3px}.table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: AppValidatorService }, { type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { enableInfiniteScroll: [{
                 type: Input
             }], useSticky: [{
@@ -41591,7 +41596,7 @@ class Table2TestPage extends AppTable {
             {
                 provide: AppTable, useExisting: forwardRef(() => Table2TestPage),
             }
-        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar color=\"primary\" [canGoBack]=\"true\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\"\n             [backHref]=\"'/testing'\">\n\n  <ion-title>Table (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n\n      <input matInput type=\"number\" step=\"1\" style=\"color:black; width: 50px;\" [(ngModel)]=\"rowHeight\">\n\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\">filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\"\n              [disabled]=\"!(dirtySubject|async)\"\n              (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n    </ng-container>\n\n    <!-- if row selection -->\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              *ngIf=\"canEdit\" [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && selection.selected | isArrayLength: {equals: 1}\"\n              [title]=\"'COMMON.BTN_DUPLICATE'|translate\"\n              (click)=\"duplicateRow($event, selection.selected[0])\">\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{'TABLE.TESTING.SEARCH_TEXT'|translate}}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput\n                     formControlName=\"searchText\"\n                     autocomplete=\"off\">\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\"\n           [style.--mat-row-height]=\"rowHeight + 'px'\">\n      >\n      <ng-container matColumnDef=\"select\" [sticky]=\"checkBoxSelection\" [class.mat-column-sticky]=\"checkBoxSelection\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox\n            [checked]=\"selection.hasValue() && isAllSelected()\"\n            [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n            [hidden]=\"!selection.isMultipleSelection()\"\n            (change)=\"$event ? masterToggle() : null\"\n          ></mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox\n            [checked]=\"selection.isSelected(row)\"\n            (click)=\"toggleSelectRow($event, row)\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"true\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n        >\n          <span mat-sort-header>\n            <ion-label title=\"Id\">#</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field\n            *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\"\n          >\n            <input\n              matInput\n              autocomplete=\"off\"\n              required\n              [formControl]=\"row.validator | formGetControl : 'id'\"\n              placeholder=\"Id\"\n              [appAutofocus]=\"true\"\n            />\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'id').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'id').hasError('alreadyExists')\" translate>\n              ERROR.FIELD_NOT_UNIQUE_ID\n            </mat-error>\n          </mat-form-field>\n\n          <ng-template #readOnlyId>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'id') || (row.currentData | propertyGet : 'id') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n        <ion-label [title]=\"'TABLE.TESTING.NAME' | translate\">{{ 'TABLE.TESTING.NAME' | translate }}</ion-label>\n        <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n    </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [required]=\"true\"\n              [formControl]=\"row.validator | formGetControl : 'name'\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.id === -1\"\n            />\n            <ng-content select=\"[suffix]\"></ng-content>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'name').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'name').hasError('maxlength')\" translate>\n              ERROR.FIELD_MAX_LENGTH_COMPACT\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'name').hasError('minlength')\" translate>\n              ERROR.FIELD_MIN_LENGTH_COMPACT\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'name') || (row.currentData | propertyGet : 'name') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <span mat-sort-header>\n            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-autocomplete-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            panelWidth=\"750px\"\n            [formControl]=\"row.validator | formGetControl : 'levelId'\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [required]=\"true\"\n            [config]=\"autocompleteFields.level\"\n            [highlightAccent]=\"true\"\n          >\n            <mat-error matError *ngIf=\"(row.validator | formGetControl : 'levelId').hasError('invalid')\" translate>\n              ERROR.FIELD_INVALID\n            </mat-error>\n          </mat-autocomplete-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label\n              appAutoTitle\n            >\n              {{\n              autocompleteFields.level?.displayWith((row.validator | formGetValue : 'levelId') || (row.currentData | propertyGet : 'levelId')) ||\n              ((row.validator | formGetValue : 'levelId') || (row.currentData | propertyGet : 'levelId')\n                | referentialToString)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean2-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"(row.validator | formGetControl : 'boolean') || formBuilder.control(row.currentData['boolean'])\"\n          ></mat-boolean2-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n              (row.validator | formGetValue : 'boolean') || (row.currentData | propertyGet : 'boolean')\n                ? ('COMMON.YES' | translate)\n                : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean2\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 2</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean2-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'radio'\"\n            [formControl]=\"(row.validator | formGetControl : 'boolean2') || formBuilder.control(row.currentData['boolean2'])\"\n          ></mat-boolean2-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n              (row.validator | formGetValue : 'boolean2') || (row.currentData | propertyGet : 'boolean2')\n                ? ('COMMON.YES' | translate)\n                : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- NOTE : Never used in table -->\n<!--      <ng-container matColumnDef=\"boolean3\">-->\n<!--        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">-->\n<!--          &lt;!&ndash; if sortable, wrap the header with a mat-sort-header &ndash;&gt;-->\n<!--          <span mat-sort-header>-->\n<!--            <ion-label>Boolean 3</ion-label>-->\n<!--          </span>-->\n<!--        </th>-->\n<!--        <td mat-cell *matCellDef=\"let row\">-->\n<!--          <mat-boolean2-field-->\n<!--            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"-->\n<!--            floatLabel=\"never\"-->\n<!--            [style]=\"'button'\"-->\n<!--            [formControl]=\"(row.validator | formGetControl : 'boolean3') || formBuilder.control(row.currentData['boolean3'])\"-->\n<!--          ></mat-boolean2-field>-->\n<!--          <ng-template #readOnlyTemplate>-->\n<!--            <ion-label appAutoTitle>-->\n<!--              {{-->\n<!--              (row.validator | formGetValue : 'boolean3') || (row.currentData | propertyGet : 'boolean3')-->\n<!--                ? ('COMMON.YES' | translate)-->\n<!--                : ('COMMON.NO' | translate)-->\n<!--              }}-->\n<!--            </ion-label>-->\n<!--          </ng-template>-->\n<!--        </td>-->\n<!--      </ng-container>-->\n\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"true\" [canCancel]=\"false\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-disabled]=\"!row.editing\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll *ngIf=\"enableInfiniteScroll\"\n                         [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\"\n                         (ionInfinite)=\"fetchMore($event)\">\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS'|translate\">\n      </ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator *ngIf=\"!enableInfiniteScroll\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\"\n                 class=\"mat-paginator-footer\"\n                 showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"canEdit && !mobile\"\n                        (onCancel)=\"load()\"\n                        (onSave)=\"save()\"\n                        [disabled]=\"(loadingSubject|async) || !dirty\">\n    <!-- error -->\n    <ion-item *ngIf=\"error$|async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n         *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$2.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i6$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i14$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i9$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i7$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatBooleanField2, selector: "mat-boolean2-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "[appAutoTitle]" }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave", "showSaveAndClose", "showSaveAndNext"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", outputs: ["resizable", "fit"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+        ], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }, { propertyName: "infiniteScroll", first: true, predicate: IonInfiniteScroll, descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar color=\"primary\" [canGoBack]=\"true\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\"\n             [backHref]=\"'/testing'\">\n\n  <ion-title>Table (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n\n      <input matInput type=\"number\" step=\"1\" style=\"color:black; width: 50px;\" [(ngModel)]=\"rowHeight\">\n\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\"\n                  aria-hidden=\"false\"\n        >filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\"\n              [disabled]=\"!(dirtySubject|async)\"\n              (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n    </ng-container>\n\n    <!-- if row selection -->\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              *ngIf=\"canEdit\" [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && selection.selected | isArrayLength: {equals: 1}\"\n              [title]=\"'COMMON.BTN_DUPLICATE'|translate\"\n              (click)=\"duplicateRow($event, selection.selected[0])\">\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{'TABLE.TESTING.SEARCH_TEXT'|translate}}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput\n                     formControlName=\"searchText\"\n                     autocomplete=\"off\">\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\"\n           [style.--mat-row-height]=\"rowHeight + 'px'\">\n      >\n      <ng-container matColumnDef=\"select\" [sticky]=\"checkBoxSelection\" [class.mat-column-sticky]=\"checkBoxSelection\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox\n            [checked]=\"selection.hasValue() && isAllSelected()\"\n            [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n            [hidden]=\"!selection.isMultipleSelection()\"\n            (change)=\"$event ? masterToggle() : null\"\n          ></mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox\n            [checked]=\"selection.isSelected(row)\"\n            (click)=\"toggleSelectRow($event, row)\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"true\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n        >\n          <span mat-sort-header>\n            <ion-label title=\"Id\">#</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field\n            *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\"\n          >\n            <input\n              matInput\n              autocomplete=\"off\"\n              required\n              [formControl]=\"row.validator | formGetControl : 'id'\"\n              placeholder=\"Id\"\n              [appAutofocus]=\"true\"\n            />\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'id').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'id').hasError('alreadyExists')\" translate>\n              ERROR.FIELD_NOT_UNIQUE_ID\n            </mat-error>\n          </mat-form-field>\n\n          <ng-template #readOnlyId>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'id') || (row.currentData | propertyGet : 'id') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n        <ion-label [title]=\"'TABLE.TESTING.NAME' | translate\">{{ 'TABLE.TESTING.NAME' | translate }}</ion-label>\n        <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n    </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [required]=\"true\"\n              [formControl]=\"row.validator | formGetControl : 'name'\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.id === -1\"\n            />\n            <ng-content select=\"[suffix]\"></ng-content>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'name').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'name').hasError('maxlength')\" translate>\n              ERROR.FIELD_MAX_LENGTH_COMPACT\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'name').hasError('minlength')\" translate>\n              ERROR.FIELD_MIN_LENGTH_COMPACT\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'name') || (row.currentData | propertyGet : 'name') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <span mat-sort-header>\n            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-autocomplete-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            panelWidth=\"750px\"\n            [formControl]=\"row.validator | formGetControl : 'levelId'\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [required]=\"true\"\n            [config]=\"autocompleteFields.level\"\n            [highlightAccent]=\"true\"\n          >\n            <mat-error matError *ngIf=\"(row.validator | formGetControl : 'levelId').hasError('invalid')\" translate>\n              ERROR.FIELD_INVALID\n            </mat-error>\n          </mat-autocomplete-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label\n              appAutoTitle\n            >\n              {{\n              autocompleteFields.level?.displayWith((row.validator | formGetValue : 'levelId') || (row.currentData | propertyGet : 'levelId')) ||\n              ((row.validator | formGetValue : 'levelId') || (row.currentData | propertyGet : 'levelId')\n                | referentialToString)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean2-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"(row.validator | formGetControl : 'boolean') || formBuilder.control(row.currentData['boolean'])\"\n          ></mat-boolean2-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n              (row.validator | formGetValue : 'boolean') || (row.currentData | propertyGet : 'boolean')\n                ? ('COMMON.YES' | translate)\n                : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean2\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 2</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean2-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'radio'\"\n            [formControl]=\"(row.validator | formGetControl : 'boolean2') || formBuilder.control(row.currentData['boolean2'])\"\n          ></mat-boolean2-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n              (row.validator | formGetValue : 'boolean2') || (row.currentData | propertyGet : 'boolean2')\n                ? ('COMMON.YES' | translate)\n                : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- NOTE : Never used in table -->\n<!--      <ng-container matColumnDef=\"boolean3\">-->\n<!--        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">-->\n<!--          &lt;!&ndash; if sortable, wrap the header with a mat-sort-header &ndash;&gt;-->\n<!--          <span mat-sort-header>-->\n<!--            <ion-label>Boolean 3</ion-label>-->\n<!--          </span>-->\n<!--        </th>-->\n<!--        <td mat-cell *matCellDef=\"let row\">-->\n<!--          <mat-boolean2-field-->\n<!--            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"-->\n<!--            floatLabel=\"never\"-->\n<!--            [style]=\"'button'\"-->\n<!--            [formControl]=\"(row.validator | formGetControl : 'boolean3') || formBuilder.control(row.currentData['boolean3'])\"-->\n<!--          ></mat-boolean2-field>-->\n<!--          <ng-template #readOnlyTemplate>-->\n<!--            <ion-label appAutoTitle>-->\n<!--              {{-->\n<!--              (row.validator | formGetValue : 'boolean3') || (row.currentData | propertyGet : 'boolean3')-->\n<!--                ? ('COMMON.YES' | translate)-->\n<!--                : ('COMMON.NO' | translate)-->\n<!--              }}-->\n<!--            </ion-label>-->\n<!--          </ng-template>-->\n<!--        </td>-->\n<!--      </ng-container>-->\n\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"true\" [canCancel]=\"false\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-disabled]=\"!row.editing\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll *ngIf=\"enableInfiniteScroll\"\n                         [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\"\n                         (ionInfinite)=\"fetchMore($event)\">\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS'|translate\">\n      </ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator *ngIf=\"!enableInfiniteScroll\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\"\n                 showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"canEdit && !mobile\"\n                        (onCancel)=\"load()\"\n                        (onSave)=\"save()\"\n                        [disabled]=\"(loadingSubject|async) || !dirty\">\n    <!-- error -->\n    <ion-item *ngIf=\"error$|async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n         *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i2$2.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$2.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: i2$2.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$2.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$2.IonFabButton, selector: "ion-fab-button", inputs: ["activated", "closeIcon", "color", "disabled", "download", "href", "mode", "rel", "routerAnimation", "routerDirection", "show", "size", "target", "translucent", "type"] }, { kind: "component", type: i2$2.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$2.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$2.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$2.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$2.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$2.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "counterFormatter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { kind: "component", type: i2$2.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$2.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$2.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$2.IonRow, selector: "ion-row" }, { kind: "component", type: i2$2.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$2.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$2.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i6$6.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i6$6.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i6$6.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i6$6.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i6$6.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i6$6.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i6$6.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i6$6.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i6$6.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i6$6.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i7$4.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i7$4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i14$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled", "color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i6$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i9$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i9$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i7$5.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "appearance", "placeholder", "suggestFn", "required", "mobile", "clearable", "debounceTime", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "class", "panelWidth", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keyup.enter"] }, { kind: "component", type: MatBooleanField2, selector: "mat-boolean2-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "readonly", "required", "compact", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "tabindex", "value"], outputs: ["keyup.enter", "onBlur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "[appAutoTitle]" }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave", "showSaveAndClose", "showSaveAndNext"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ResizableComponent, selector: "th[resizable]", inputs: ["resizable"], outputs: ["sizeChanged"] }, { kind: "directive", type: ResizableDirective, selector: "[resizable]", outputs: ["resizable", "fit"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: ArrayLengthPipe, name: "isArrayLength" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImport: i0, type: Table2TestPage, decorators: [{
             type: Component,
@@ -41603,7 +41608,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.6", ngImpor
                         {
                             provide: AppTable, useExisting: forwardRef(() => Table2TestPage),
                         }
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar color=\"primary\" [canGoBack]=\"true\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\"\n             [backHref]=\"'/testing'\">\n\n  <ion-title>Table (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n\n      <input matInput type=\"number\" step=\"1\" style=\"color:black; width: 50px;\" [(ngModel)]=\"rowHeight\">\n\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\">filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\"\n              [disabled]=\"!(dirtySubject|async)\"\n              (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n    </ng-container>\n\n    <!-- if row selection -->\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              *ngIf=\"canEdit\" [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && selection.selected | isArrayLength: {equals: 1}\"\n              [title]=\"'COMMON.BTN_DUPLICATE'|translate\"\n              (click)=\"duplicateRow($event, selection.selected[0])\">\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{'TABLE.TESTING.SEARCH_TEXT'|translate}}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput\n                     formControlName=\"searchText\"\n                     autocomplete=\"off\">\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\"\n           [style.--mat-row-height]=\"rowHeight + 'px'\">\n      >\n      <ng-container matColumnDef=\"select\" [sticky]=\"checkBoxSelection\" [class.mat-column-sticky]=\"checkBoxSelection\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox\n            [checked]=\"selection.hasValue() && isAllSelected()\"\n            [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n            [hidden]=\"!selection.isMultipleSelection()\"\n            (change)=\"$event ? masterToggle() : null\"\n          ></mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox\n            [checked]=\"selection.isSelected(row)\"\n            (click)=\"toggleSelectRow($event, row)\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"true\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n        >\n          <span mat-sort-header>\n            <ion-label title=\"Id\">#</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field\n            *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\"\n          >\n            <input\n              matInput\n              autocomplete=\"off\"\n              required\n              [formControl]=\"row.validator | formGetControl : 'id'\"\n              placeholder=\"Id\"\n              [appAutofocus]=\"true\"\n            />\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'id').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'id').hasError('alreadyExists')\" translate>\n              ERROR.FIELD_NOT_UNIQUE_ID\n            </mat-error>\n          </mat-form-field>\n\n          <ng-template #readOnlyId>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'id') || (row.currentData | propertyGet : 'id') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n        <ion-label [title]=\"'TABLE.TESTING.NAME' | translate\">{{ 'TABLE.TESTING.NAME' | translate }}</ion-label>\n        <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n    </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [required]=\"true\"\n              [formControl]=\"row.validator | formGetControl : 'name'\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.id === -1\"\n            />\n            <ng-content select=\"[suffix]\"></ng-content>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'name').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'name').hasError('maxlength')\" translate>\n              ERROR.FIELD_MAX_LENGTH_COMPACT\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'name').hasError('minlength')\" translate>\n              ERROR.FIELD_MIN_LENGTH_COMPACT\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'name') || (row.currentData | propertyGet : 'name') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <span mat-sort-header>\n            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-autocomplete-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            panelWidth=\"750px\"\n            [formControl]=\"row.validator | formGetControl : 'levelId'\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [required]=\"true\"\n            [config]=\"autocompleteFields.level\"\n            [highlightAccent]=\"true\"\n          >\n            <mat-error matError *ngIf=\"(row.validator | formGetControl : 'levelId').hasError('invalid')\" translate>\n              ERROR.FIELD_INVALID\n            </mat-error>\n          </mat-autocomplete-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label\n              appAutoTitle\n            >\n              {{\n              autocompleteFields.level?.displayWith((row.validator | formGetValue : 'levelId') || (row.currentData | propertyGet : 'levelId')) ||\n              ((row.validator | formGetValue : 'levelId') || (row.currentData | propertyGet : 'levelId')\n                | referentialToString)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean2-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"(row.validator | formGetControl : 'boolean') || formBuilder.control(row.currentData['boolean'])\"\n          ></mat-boolean2-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n              (row.validator | formGetValue : 'boolean') || (row.currentData | propertyGet : 'boolean')\n                ? ('COMMON.YES' | translate)\n                : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean2\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 2</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean2-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'radio'\"\n            [formControl]=\"(row.validator | formGetControl : 'boolean2') || formBuilder.control(row.currentData['boolean2'])\"\n          ></mat-boolean2-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n              (row.validator | formGetValue : 'boolean2') || (row.currentData | propertyGet : 'boolean2')\n                ? ('COMMON.YES' | translate)\n                : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- NOTE : Never used in table -->\n<!--      <ng-container matColumnDef=\"boolean3\">-->\n<!--        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">-->\n<!--          &lt;!&ndash; if sortable, wrap the header with a mat-sort-header &ndash;&gt;-->\n<!--          <span mat-sort-header>-->\n<!--            <ion-label>Boolean 3</ion-label>-->\n<!--          </span>-->\n<!--        </th>-->\n<!--        <td mat-cell *matCellDef=\"let row\">-->\n<!--          <mat-boolean2-field-->\n<!--            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"-->\n<!--            floatLabel=\"never\"-->\n<!--            [style]=\"'button'\"-->\n<!--            [formControl]=\"(row.validator | formGetControl : 'boolean3') || formBuilder.control(row.currentData['boolean3'])\"-->\n<!--          ></mat-boolean2-field>-->\n<!--          <ng-template #readOnlyTemplate>-->\n<!--            <ion-label appAutoTitle>-->\n<!--              {{-->\n<!--              (row.validator | formGetValue : 'boolean3') || (row.currentData | propertyGet : 'boolean3')-->\n<!--                ? ('COMMON.YES' | translate)-->\n<!--                : ('COMMON.NO' | translate)-->\n<!--              }}-->\n<!--            </ion-label>-->\n<!--          </ng-template>-->\n<!--        </td>-->\n<!--      </ng-container>-->\n\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"true\" [canCancel]=\"false\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-disabled]=\"!row.editing\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll *ngIf=\"enableInfiniteScroll\"\n                         [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\"\n                         (ionInfinite)=\"fetchMore($event)\">\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS'|translate\">\n      </ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator *ngIf=\"!enableInfiniteScroll\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\"\n                 class=\"mat-paginator-footer\"\n                 showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"canEdit && !mobile\"\n                        (onCancel)=\"load()\"\n                        (onSave)=\"save()\"\n                        [disabled]=\"(loadingSubject|async) || !dirty\">\n    <!-- error -->\n    <ion-item *ngIf=\"error$|async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n         *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<app-toolbar color=\"primary\" [canGoBack]=\"true\"\n             [hasValidate]=\"!(loadingSubject|async) && dirty\"\n             (onValidate)=\"save()\"\n             [backHref]=\"'/testing'\">\n\n  <ion-title>Table (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n\n    <ng-container *ngIf=\"!selection.hasValue(); else hasSelection\">\n\n      <input matInput type=\"number\" step=\"1\" style=\"color:black; width: 50px;\" [(ngModel)]=\"rowHeight\">\n\n      <!-- Add -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && !mobile\"\n              [title]=\"'COMMON.BTN_ADD'|translate\"\n              (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\"\n              *ngIf=\"filterCriteriaCount\">\n        <mat-icon color=\"accent\">filter_list_alt</mat-icon>\n        <mat-icon class=\"icon-secondary\" style=\"left: 16px; top: 5px; font-weight: bold;\">close</mat-icon>\n      </button>\n\n      <!-- show filter -->\n      <button mat-icon-button (click)=\"filterExpansionPanel.toggle()\">\n        <mat-icon *ngIf=\"filterCriteriaCount; else emptyFilter\"\n                  [matBadge]=\"filterCriteriaCount\"\n                  matBadgeColor=\"accent\"\n                  matBadgeSize=\"small\"\n                  matBadgePosition=\"above after\"\n                  aria-hidden=\"false\"\n        >filter_list_alt\n        </mat-icon>\n        <ng-template #emptyFilter>\n          <mat-icon>filter_list_alt</mat-icon>\n        </ng-template>\n      </button>\n\n      <!-- save -->\n      <button mat-icon-button *ngIf=\"mobile\"\n              [disabled]=\"!(dirtySubject|async)\"\n              (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n    </ng-container>\n\n    <!-- if row selection -->\n    <ng-template #hasSelection>\n\n      <!-- delete -->\n      <button mat-icon-button\n              *ngIf=\"canEdit\" [title]=\"'COMMON.BTN_DELETE'|translate\"\n              (click)=\"deleteSelection($event)\">\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button mat-icon-button\n              *ngIf=\"canEdit && selection.selected | isArrayLength: {equals: 1}\"\n              [title]=\"'COMMON.BTN_DUPLICATE'|translate\"\n              (click)=\"duplicateRow($event, selection.selected[0])\">\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    </ng-template>\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\n\n  <ion-refresher slot=\"fixed\" *ngIf=\"mobile\" (ionRefresh)=\"doRefresh($event)\">\n    <ion-refresher-content></ion-refresher-content>\n  </ion-refresher>\n\n  <!-- error -->\n  <ion-item *ngIf=\"mobile && error\" lines=\"none\" @slideUpDownAnimation>\n    <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n    <ion-label color=\"danger\" class=\"error\" [innerHTML]=\"error|translate\"></ion-label>\n  </ion-item>\n\n  <!-- search -->\n  <mat-expansion-panel #filterExpansionPanel class=\"filter-panel filter-panel-floating\">\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\n\n      <ion-grid>\n        <ion-row>\n          <ion-col>\n            <!-- search text -->\n            <mat-form-field>\n              <mat-label>{{'TABLE.TESTING.SEARCH_TEXT'|translate}}</mat-label>\n              <ion-icon matPrefix name=\"search\"></ion-icon>\n              <input matInput\n                     formControlName=\"searchText\"\n                     autocomplete=\"off\">\n              <button mat-icon-button matSuffix tabindex=\"-1\"\n                      type=\"button\"\n                      (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                      [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\">\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label [hidden]=\"(loadingSubject|async) || filterForm.dirty\"\n                 [color]=\"empty && 'danger'\"\n                 class=\"ion-padding\">\n        {{ (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT') | translate: {\n        count: (totalRowCount |\n          numberFormat)\n      } }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\"\n                  (click)=\"filterExpansionPanel.close()\"\n                  [disabled]=\"loadingSubject|async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button mat-button\n                  [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n                  [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n                  (click)=\"applyFilterAndClosePanel($event)\">\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- table -->\n  <div [class.table-container]=\"!enableInfiniteScroll\">\n    <table #table mat-table matSort matSortDisableClear\n           [dataSource]=\"dataSource\"\n           [matSortActive]=\"defaultSortBy\"\n           [matSortDirection]=\"defaultSortDirection\"\n           [trackBy]=\"trackByFn\"\n           [style.--mat-row-height]=\"rowHeight + 'px'\">\n      >\n      <ng-container matColumnDef=\"select\" [sticky]=\"checkBoxSelection\" [class.mat-column-sticky]=\"checkBoxSelection\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox\n            [checked]=\"selection.hasValue() && isAllSelected()\"\n            [indeterminate]=\"selection.hasValue() && !isAllSelected()\"\n            [hidden]=\"!selection.isMultipleSelection()\"\n            (change)=\"$event ? masterToggle() : null\"\n          ></mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox\n            [checked]=\"selection.isSelected(row)\"\n            (click)=\"toggleSelectRow($event, row)\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"true\">\n        <th\n          mat-header-cell\n          *matHeaderCellDef\n        >\n          <span mat-sort-header>\n            <ion-label title=\"Id\">#</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field\n            *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\"\n          >\n            <input\n              matInput\n              autocomplete=\"off\"\n              required\n              [formControl]=\"row.validator | formGetControl : 'id'\"\n              placeholder=\"Id\"\n              [appAutofocus]=\"true\"\n            />\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'id').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'id').hasError('alreadyExists')\" translate>\n              ERROR.FIELD_NOT_UNIQUE_ID\n            </mat-error>\n          </mat-form-field>\n\n          <ng-template #readOnlyId>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'id') || (row.currentData | propertyGet : 'id') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Name column -->\n      <ng-container matColumnDef=\"name\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n        <ion-label [title]=\"'TABLE.TESTING.NAME' | translate\">{{ 'TABLE.TESTING.NAME' | translate }}</ion-label>\n        <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n    </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-form-field *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\">\n            <input\n              matInput\n              autocomplete=\"off\"\n              [required]=\"true\"\n              [formControl]=\"row.validator | formGetControl : 'name'\"\n              [placeholder]=\"'TABLE.TESTING.NAME' | translate\"\n              [appAutofocus]=\"row.id === -1\"\n            />\n            <ng-content select=\"[suffix]\"></ng-content>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'name').hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'name').hasError('maxlength')\" translate>\n              ERROR.FIELD_MAX_LENGTH_COMPACT\n            </mat-error>\n            <mat-error *ngIf=\"(row.validator | formGetControl : 'name').hasError('minlength')\" translate>\n              ERROR.FIELD_MIN_LENGTH_COMPACT\n            </mat-error>\n          </mat-form-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{ (row.validator | formGetValue : 'name') || (row.currentData | propertyGet : 'name') }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- Level column -->\n      <ng-container matColumnDef=\"levelId\">\n        <th mat-header-cell *matHeaderCellDef [resizable]=\"resizable\">\n          <span mat-sort-header>\n            <ion-label>{{ 'TABLE.TESTING.LEVEL_ID' | translate }}</ion-label>\n            <ion-label color=\"danger\" [innerHTML]=\"'&nbsp;*'\"></ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-autocomplete-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            panelWidth=\"750px\"\n            [formControl]=\"row.validator | formGetControl : 'levelId'\"\n            [placeholder]=\"'TABLE.TESTING.LEVEL_ID' | translate\"\n            floatLabel=\"never\"\n            [required]=\"true\"\n            [config]=\"autocompleteFields.level\"\n            [highlightAccent]=\"true\"\n          >\n            <mat-error matError *ngIf=\"(row.validator | formGetControl : 'levelId').hasError('invalid')\" translate>\n              ERROR.FIELD_INVALID\n            </mat-error>\n          </mat-autocomplete-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label\n              appAutoTitle\n            >\n              {{\n              autocompleteFields.level?.displayWith((row.validator | formGetValue : 'levelId') || (row.currentData | propertyGet : 'levelId')) ||\n              ((row.validator | formGetValue : 'levelId') || (row.currentData | propertyGet : 'levelId')\n                | referentialToString)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean2-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"(row.validator | formGetControl : 'boolean') || formBuilder.control(row.currentData['boolean'])\"\n          ></mat-boolean2-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n              (row.validator | formGetValue : 'boolean') || (row.currentData | propertyGet : 'boolean')\n                ? ('COMMON.YES' | translate)\n                : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"boolean2\">\n        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">\n          <!-- if sortable, wrap the header with a mat-sort-header -->\n          <span mat-sort-header>\n            <ion-label>Boolean 2</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean2-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'radio'\"\n            [formControl]=\"(row.validator | formGetControl : 'boolean2') || formBuilder.control(row.currentData['boolean2'])\"\n          ></mat-boolean2-field>\n          <ng-template #readOnlyTemplate>\n            <ion-label appAutoTitle>\n              {{\n              (row.validator | formGetValue : 'boolean2') || (row.currentData | propertyGet : 'boolean2')\n                ? ('COMMON.YES' | translate)\n                : ('COMMON.NO' | translate)\n              }}\n            </ion-label>\n          </ng-template>\n        </td>\n      </ng-container>\n\n      <!-- NOTE : Never used in table -->\n<!--      <ng-container matColumnDef=\"boolean3\">-->\n<!--        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]=\"resizable\">-->\n<!--          &lt;!&ndash; if sortable, wrap the header with a mat-sort-header &ndash;&gt;-->\n<!--          <span mat-sort-header>-->\n<!--            <ion-label>Boolean 3</ion-label>-->\n<!--          </span>-->\n<!--        </th>-->\n<!--        <td mat-cell *matCellDef=\"let row\">-->\n<!--          <mat-boolean2-field-->\n<!--            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"-->\n<!--            floatLabel=\"never\"-->\n<!--            [style]=\"'button'\"-->\n<!--            [formControl]=\"(row.validator | formGetControl : 'boolean3') || formBuilder.control(row.currentData['boolean3'])\"-->\n<!--          ></mat-boolean2-field>-->\n<!--          <ng-template #readOnlyTemplate>-->\n<!--            <ion-label appAutoTitle>-->\n<!--              {{-->\n<!--              (row.validator | formGetValue : 'boolean3') || (row.currentData | propertyGet : 'boolean3')-->\n<!--                ? ('COMMON.YES' | translate)-->\n<!--                : ('COMMON.NO' | translate)-->\n<!--              }}-->\n<!--            </ion-label>-->\n<!--          </ng-template>-->\n<!--        </td>-->\n<!--      </ng-container>-->\n\n\n      <!-- Actions buttons column -->\n      <app-actions-column [stickyEnd]=\"true\" [canCancel]=\"false\"\n                          (optionsClick)=\"openSelectColumnsModal($event)\"\n                          (cancelOrDeleteClick)=\"cancelOrDelete($event.event, $event.row)\"\n                          (confirmAndAddClick)=\"confirmAndAdd($event.event, $event.row)\"\n                          (backward)=\"confirmAndBackward($event.event, $event.row)\"\n                          (forward)=\"confirmAndForward($event.event, $event.row)\"\n                          [cellTemplate]=\"cellInjection\">\n\n        <!-- cell injection-->\n        <ng-template #cellInjection let-row>\n          <span *ngIf=\"row.editing && !row.validator.dirty\">-</span>\n        </ng-template>\n\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"\n          [class.mat-row-selected]=\"row.editing\"\n          [class.mat-row-error]=\"row.validator?.invalid\"\n          [class.mat-row-disabled]=\"!row.editing\"\n          [class.mat-row-dirty]=\"row.validator?.dirty\"\n          (click)=\"clickRow($event, row)\"\n          (keydown.escape)=\"escapeEditingRow($event)\"\n          [cdkTrapFocus]=\"row.validator?.invalid\"></tr>\n    </table>\n\n    <ng-container *ngIf=\"loadingSubject|async; else noResult\">\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    </ng-container>\n\n    <ng-template #noResult>\n      <ion-item *ngIf=\"totalRowCount === 0\">\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    </ng-template>\n\n    <ion-infinite-scroll *ngIf=\"enableInfiniteScroll\"\n                         [threshold]=\"mobile ? '10%' : '2%'\" position=\"bottom\"\n                         (ionInfinite)=\"fetchMore($event)\">\n      <ion-infinite-scroll-content\n        loadingSpinner=\"circles\"\n        [loadingText]=\"'COMMON.LOADING_DOTS'|translate\">\n      </ion-infinite-scroll-content>\n    </ion-infinite-scroll>\n  </div>\n</ion-content>\n\n<ion-footer>\n  <!-- Paginator  -->\n  <mat-paginator *ngIf=\"!enableInfiniteScroll\"\n                 [length]=\"totalRowCount\" [pageSize]=\"defaultPageSize\" [pageSizeOptions]=\"defaultPageSizeOptions\"\n                 showFirstLastButtons>\n  </mat-paginator>\n\n  <app-form-buttons-bar *ngIf=\"canEdit && !mobile\"\n                        (onCancel)=\"load()\"\n                        (onSave)=\"save()\"\n                        [disabled]=\"(loadingSubject|async) || !dirty\">\n    <!-- error -->\n    <ion-item *ngIf=\"error$|async\" lines=\"none\">\n      <ion-icon color=\"danger\" slot=\"start\" name=\"alert-circle\"></ion-icon>\n      <ion-label color=\"danger\" [innerHTML]=\"error|translate\"></ion-label>\n    </ion-item>\n  </app-form-buttons-bar>\n</ion-footer>\n\n<ion-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\"\n         *ngIf=\"canEdit && mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addRow($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".table-container .mat-mdc-table .mat-column-select{min-width:30px}.table-container .mat-mdc-table .mat-column-id{min-width:30px;max-width:30px}.table-container .mat-mdc-table .mat-column-label,.table-container .mat-mdc-table .mat-column-name,.table-container .mat-mdc-table .mat-column-levelId,.table-container .mat-mdc-table .mat-column-statusId{min-width:150px}.table-container .mat-mdc-table .mat-column-comments{min-width:100px;max-width:100px}.table-container .mat-mdc-table .mat-column-updateDate{min-width:110px;max-width:110px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: AppValidatorService }, { type: i1$2.UntypedFormBuilder }, { type: i0.ChangeDetectorRef }], propDecorators: { filterExpansionPanel: [{
                 type: ViewChild,
                 args: [MatExpansionPanel, { static: true }]