@sumaris-net/ngx-components 18.22.6 → 18.22.8

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

@@ -27187,11 +27187,11 @@ function RxStateComputed(dependencies, computeFn, opts) {
 function RxStateOutput(statePropertyName, opts) {
     return function (target, key) {
         // Naming convention check
-        if (!production && !key.endsWith('Changes')) {
-            console.warn(`[RxStateOutput] Convention: Property ${target.constructor?.name}.${String(key)} should end with 'Changes' to indicate it's an Output`);
+        if (!production && !key.endsWith('Changes') && !key.endsWith('Change')) {
+            console.warn(`[RxStateOutput] Convention: Property ${target.constructor?.name}.${String(key)} should end with 'Change' or 'Changes' to indicate it's an Output`);
         }
         // Determine state property name
-        const finalStatePropertyName = statePropertyName || key.replace(/Changes$/, '');
+        const finalStatePropertyName = statePropertyName || key.replace(/Changes?$/, '');
         // Determine state object
         const stateVarName = target instanceof RxState ? null : target[STATE_VAR_NAME_KEY] || opts?.stateName || DEFAULT_STATE_VAR_NAME;
         const cachePropertyName = `__${key}_cache`;
@@ -39627,7 +39627,7 @@ class AppTable {
     startCellValueChanges(name, row) {
         const def = this._cellValueChangesDefs[name];
         if (!def) {
-            console.warn('[table] Listener with name {' + name + '} not registered! Please call registerCellValueChanges() before;');
+            console.warn(`[table] Listener with name {${name} not registered! Please call registerCellValueChanges() before`);
             return;
         }
         // Stop previous subscription
@@ -39827,6 +39827,7 @@ class ActionsColumnComponent {
     matMenuTrigger;
     matColumnDef = 'actions';
     style = 'table';
+    showPendingSpinner = true;
     stickyEnd = false;
     canCancel;
     canConfirm;
@@ -39879,11 +39880,11 @@ class ActionsColumnComponent {
         this.forward.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsColumnComponent, deps: [{ token: i1$7.MatTable }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ActionsColumnComponent, selector: "app-actions-column", inputs: { matColumnDef: "matColumnDef", style: "style", stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], canCancel: ["canCancel", "canCancel", booleanAttribute], canConfirm: ["canConfirm", "canConfirm", booleanAttribute], canDelete: ["canDelete", "canDelete", booleanAttribute], canBackward: ["canBackward", "canBackward", booleanAttribute], canForward: ["canForward", "canForward", booleanAttribute], canConfirmAndAdd: ["canConfirmAndAdd", "canConfirmAndAdd", booleanAttribute], dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplateStart: "cellTemplateStart", cellTemplate: "cellTemplate" }, outputs: { optionsClick: "optionsClick", cancelOrDeleteClick: "cancelOrDeleteClick", confirmEditCreateClick: "confirmEditCreateClick", confirmAndAddClick: "confirmAndAddClick", backward: "backward", forward: "forward" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\">\n  @switch (style) {\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('table') {\n      <!-- header cell -->\n      <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        <button\n          mat-icon-button\n          *ngIf=\"optionsClick.observed\"\n          [title]=\"optionsTitle | translate\"\n          (click)=\"optionsClick.emit($event)\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </th>\n\n      <!-- row cell -->\n      <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n\n        @let editing = row.editing;\n        @let dirty = row.dirty;\n        @let valid = row.valid;\n        @let pending = row.pending;\n        @let invalid = !pending && !valid;\n        @if (editing) {\n          <!-- pending -->\n          @if (pending) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && dirty && valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"'COMMON.BTN_APPLY' | translate\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            @if (canDelete && invalid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_DELETE' | translate\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>delete_outline</mat-icon>\n              </button>\n            }\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_ADD' | translate\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- existing row -->\n          } @else if (canCancel && dirty) {\n            <!-- cancel button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"'COMMON.BTN_UNDO' | translate\"\n              (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>undo</mat-icon>\n            </button>\n          }\n        } @else if (dirtyIcon && dirty) {\n          <!-- dirty icon -->\n          <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n\n        <!-- navigation buttons (invisible - focusable only) -->\n        @if (canForward && editing && valid) {\n          <!-- forward button -->\n          <button class=\"mat-row-action-button-navigation\" (focus)=\"forward.emit({ event: $event, row: row })\"></button>\n        } @else if (canBackward && !editing) {\n          <!-- backward button -->\n          <button\n            class=\"mat-row-action-button-navigation\"\n            (focus)=\"backward.emit({ event: $event, row: row })\"\n          ></button>\n        }\n      </td>\n\n      <td mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </td>\n    }\n\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('mat-table') {\n      <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        <button\n          mat-icon-button\n          *ngIf=\"optionsClick.observed\"\n          [title]=\"optionsTitle | translate\"\n          (click)=\"optionsClick.emit($event)\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n        @if (row.editing) {\n          <!-- pending -->\n          @if (row.validator?.pending) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && row.validator?.dirty && row.validator.valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"'COMMON.BTN_APPLY' | translate\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              *ngIf=\"canDelete && row.validator?.invalid\"\n              [title]=\"'COMMON.BTN_DELETE' | translate\"\n              (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>delete_outline</mat-icon>\n            </button>\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && row.validator?.valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_ADD' | translate\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button\n                class=\"mat-row-action-button-navigation\"\n                (focus)=\"forward.emit({ event: $event, row: row })\"\n              ></button>\n            }\n\n            <!-- existing row -->\n          } @else {\n            <!-- cancel button -->\n            @if (canCancel && row.validator?.dirty) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_UNDO' | translate\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>undo</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button\n                class=\"mat-row-action-button-navigation\"\n                (focus)=\"forward.emit({ event: $event, row: row })\"\n              ></button>\n            }\n          }\n        } @else {\n          <!-- dirty icon -->\n          @if (dirtyIcon && row.validator?.dirty) {\n            <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n          }\n\n          <!-- backward button (invisible - focusable only) -->\n          @if (canBackward) {\n            <button\n              class=\"mat-row-action-button-navigation\"\n              (focus)=\"backward.emit({ event: $event, row: row })\"\n            ></button>\n          }\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n      </mat-cell>\n\n      <mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </mat-footer-cell>\n    }\n  }\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$7.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ActionsColumnComponent, selector: "app-actions-column", inputs: { matColumnDef: "matColumnDef", style: "style", showPendingSpinner: ["showPendingSpinner", "showPendingSpinner", booleanAttribute], stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], canCancel: ["canCancel", "canCancel", booleanAttribute], canConfirm: ["canConfirm", "canConfirm", booleanAttribute], canDelete: ["canDelete", "canDelete", booleanAttribute], canBackward: ["canBackward", "canBackward", booleanAttribute], canForward: ["canForward", "canForward", booleanAttribute], canConfirmAndAdd: ["canConfirmAndAdd", "canConfirmAndAdd", booleanAttribute], dirtyIcon: "dirtyIcon", optionsTitle: "optionsTitle", classList: ["class", "classList"], cellTemplateStart: "cellTemplateStart", cellTemplate: "cellTemplate" }, outputs: { optionsClick: "optionsClick", cancelOrDeleteClick: "cancelOrDeleteClick", confirmEditCreateClick: "confirmEditCreateClick", confirmAndAddClick: "confirmAndAddClick", backward: "backward", forward: "forward" }, viewQueries: [{ propertyName: "columnDef", first: true, predicate: MatColumnDef, descendants: true }, { propertyName: "matMenuTrigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\">\n  @switch (style) {\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('table') {\n      <!-- header cell -->\n      <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        <button\n          mat-icon-button\n          *ngIf=\"optionsClick.observed\"\n          [title]=\"optionsTitle | translate\"\n          (click)=\"optionsClick.emit($event)\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </th>\n\n      <!-- row cell -->\n      <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n\n        @let editing = row.editing;\n        @let dirty = row.dirty;\n        @let valid = row.valid;\n        @let pending = row.pending;\n        @let invalid = !pending && !valid;\n        @if (editing) {\n          <!-- pending -->\n          @if (pending && showPendingSpinner) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && dirty && valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"'COMMON.BTN_APPLY' | translate\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            @if (canDelete && invalid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_DELETE' | translate\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>delete_outline</mat-icon>\n              </button>\n            }\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_ADD' | translate\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- existing row -->\n          } @else if (canCancel && dirty) {\n            <!-- cancel button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"'COMMON.BTN_UNDO' | translate\"\n              (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>undo</mat-icon>\n            </button>\n          }\n        } @else if (dirtyIcon && dirty) {\n          <!-- dirty icon -->\n          <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n\n        <!-- navigation buttons (invisible - focusable only) -->\n        @if (canForward && editing && valid) {\n          <!-- forward button -->\n          <button class=\"mat-row-action-button-navigation\" (focus)=\"forward.emit({ event: $event, row: row })\"></button>\n        } @else if (canBackward && !editing) {\n          <!-- backward button -->\n          <button\n            class=\"mat-row-action-button-navigation\"\n            (focus)=\"backward.emit({ event: $event, row: row })\"\n          ></button>\n        }\n      </td>\n\n      <td mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </td>\n    }\n\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('mat-table') {\n      <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        <button\n          mat-icon-button\n          *ngIf=\"optionsClick.observed\"\n          [title]=\"optionsTitle | translate\"\n          (click)=\"optionsClick.emit($event)\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n        @if (row.editing) {\n          <!-- pending -->\n          @if (row.validator?.pending) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && row.validator?.dirty && row.validator.valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"'COMMON.BTN_APPLY' | translate\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              *ngIf=\"canDelete && row.validator?.invalid\"\n              [title]=\"'COMMON.BTN_DELETE' | translate\"\n              (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>delete_outline</mat-icon>\n            </button>\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && row.validator?.valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_ADD' | translate\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button\n                class=\"mat-row-action-button-navigation\"\n                (focus)=\"forward.emit({ event: $event, row: row })\"\n              ></button>\n            }\n\n            <!-- existing row -->\n          } @else {\n            <!-- cancel button -->\n            @if (canCancel && row.validator?.dirty) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_UNDO' | translate\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>undo</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button\n                class=\"mat-row-action-button-navigation\"\n                (focus)=\"forward.emit({ event: $event, row: row })\"\n              ></button>\n            }\n          }\n        } @else {\n          <!-- dirty icon -->\n          @if (dirtyIcon && row.validator?.dirty) {\n            <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n          }\n\n          <!-- backward button (invisible - focusable only) -->\n          @if (canBackward) {\n            <button\n              class=\"mat-row-action-button-navigation\"\n              (focus)=\"backward.emit({ event: $event, row: row })\"\n            ></button>\n          }\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n      </mat-cell>\n\n      <mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </mat-footer-cell>\n    }\n  }\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i1$7.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ActionsColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-actions-column', template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\">\n  @switch (style) {\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('table') {\n      <!-- header cell -->\n      <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        <button\n          mat-icon-button\n          *ngIf=\"optionsClick.observed\"\n          [title]=\"optionsTitle | translate\"\n          (click)=\"optionsClick.emit($event)\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </th>\n\n      <!-- row cell -->\n      <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n\n        @let editing = row.editing;\n        @let dirty = row.dirty;\n        @let valid = row.valid;\n        @let pending = row.pending;\n        @let invalid = !pending && !valid;\n        @if (editing) {\n          <!-- pending -->\n          @if (pending) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && dirty && valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"'COMMON.BTN_APPLY' | translate\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            @if (canDelete && invalid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_DELETE' | translate\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>delete_outline</mat-icon>\n              </button>\n            }\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_ADD' | translate\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- existing row -->\n          } @else if (canCancel && dirty) {\n            <!-- cancel button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"'COMMON.BTN_UNDO' | translate\"\n              (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>undo</mat-icon>\n            </button>\n          }\n        } @else if (dirtyIcon && dirty) {\n          <!-- dirty icon -->\n          <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n\n        <!-- navigation buttons (invisible - focusable only) -->\n        @if (canForward && editing && valid) {\n          <!-- forward button -->\n          <button class=\"mat-row-action-button-navigation\" (focus)=\"forward.emit({ event: $event, row: row })\"></button>\n        } @else if (canBackward && !editing) {\n          <!-- backward button -->\n          <button\n            class=\"mat-row-action-button-navigation\"\n            (focus)=\"backward.emit({ event: $event, row: row })\"\n          ></button>\n        }\n      </td>\n\n      <td mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </td>\n    }\n\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('mat-table') {\n      <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        <button\n          mat-icon-button\n          *ngIf=\"optionsClick.observed\"\n          [title]=\"optionsTitle | translate\"\n          (click)=\"optionsClick.emit($event)\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n        @if (row.editing) {\n          <!-- pending -->\n          @if (row.validator?.pending) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && row.validator?.dirty && row.validator.valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"'COMMON.BTN_APPLY' | translate\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              *ngIf=\"canDelete && row.validator?.invalid\"\n              [title]=\"'COMMON.BTN_DELETE' | translate\"\n              (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>delete_outline</mat-icon>\n            </button>\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && row.validator?.valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_ADD' | translate\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button\n                class=\"mat-row-action-button-navigation\"\n                (focus)=\"forward.emit({ event: $event, row: row })\"\n              ></button>\n            }\n\n            <!-- existing row -->\n          } @else {\n            <!-- cancel button -->\n            @if (canCancel && row.validator?.dirty) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_UNDO' | translate\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>undo</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button\n                class=\"mat-row-action-button-navigation\"\n                (focus)=\"forward.emit({ event: $event, row: row })\"\n              ></button>\n            }\n          }\n        } @else {\n          <!-- dirty icon -->\n          @if (dirtyIcon && row.validator?.dirty) {\n            <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n          }\n\n          <!-- backward button (invisible - focusable only) -->\n          @if (canBackward) {\n            <button\n              class=\"mat-row-action-button-navigation\"\n              (focus)=\"backward.emit({ event: $event, row: row })\"\n            ></button>\n          }\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n      </mat-cell>\n\n      <mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </mat-footer-cell>\n    }\n  }\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"] }]
+            args: [{ selector: 'app-actions-column', template: "<ng-container [matColumnDef]=\"matColumnDef\" [stickyEnd]=\"stickyEnd\">\n  @switch (style) {\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('table') {\n      <!-- header cell -->\n      <th mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        <button\n          mat-icon-button\n          *ngIf=\"optionsClick.observed\"\n          [title]=\"optionsTitle | translate\"\n          (click)=\"optionsClick.emit($event)\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </th>\n\n      <!-- row cell -->\n      <td mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n\n        @let editing = row.editing;\n        @let dirty = row.dirty;\n        @let valid = row.valid;\n        @let pending = row.pending;\n        @let invalid = !pending && !valid;\n        @if (editing) {\n          <!-- pending -->\n          @if (pending && showPendingSpinner) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && dirty && valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"'COMMON.BTN_APPLY' | translate\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            @if (canDelete && invalid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_DELETE' | translate\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>delete_outline</mat-icon>\n              </button>\n            }\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_ADD' | translate\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- existing row -->\n          } @else if (canCancel && dirty) {\n            <!-- cancel button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"'COMMON.BTN_UNDO' | translate\"\n              (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>undo</mat-icon>\n            </button>\n          }\n        } @else if (dirtyIcon && dirty) {\n          <!-- dirty icon -->\n          <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\" tabindex=\"-1\"></ion-icon>\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n\n        <!-- navigation buttons (invisible - focusable only) -->\n        @if (canForward && editing && valid) {\n          <!-- forward button -->\n          <button class=\"mat-row-action-button-navigation\" (focus)=\"forward.emit({ event: $event, row: row })\"></button>\n        } @else if (canBackward && !editing) {\n          <!-- backward button -->\n          <button\n            class=\"mat-row-action-button-navigation\"\n            (focus)=\"backward.emit({ event: $event, row: row })\"\n          ></button>\n        }\n      </td>\n\n      <td mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </td>\n    }\n\n    <!-- mat-table style (e.g. used in sumaris activity calendar) -->\n    @case ('mat-table') {\n      <mat-header-cell *matHeaderCellDef [class]=\"classList\" [class.mat-column-sticky]=\"stickyEnd\">\n        <button\n          mat-icon-button\n          *ngIf=\"optionsClick.observed\"\n          [title]=\"optionsTitle | translate\"\n          (click)=\"optionsClick.emit($event)\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <ng-content select=\"[matHeader]\"></ng-content>\n      </mat-header-cell>\n      <mat-cell *matCellDef=\"let row\" [class]=\"classList\">\n        <ng-container *ngTemplateOutlet=\"cellTemplateStart; context: { $implicit: row }\"></ng-container>\n        @if (row.editing) {\n          <!-- pending -->\n          @if (row.validator?.pending) {\n            <ion-spinner name=\"dots\" class=\"center\"></ion-spinner>\n          }\n\n          <!-- Confirm button -->\n          @if (canConfirm && row.validator?.dirty && row.validator.valid) {\n            <button\n              mat-icon-button\n              color=\"light\"\n              [title]=\"'COMMON.BTN_APPLY' | translate\"\n              (click)=\"confirmEditCreateClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>checkmark</mat-icon>\n            </button>\n          }\n\n          <!-- new row -->\n          @if (row.id === -1) {\n            <!-- delete button -->\n            <button\n              mat-icon-button\n              color=\"light\"\n              *ngIf=\"canDelete && row.validator?.invalid\"\n              [title]=\"'COMMON.BTN_DELETE' | translate\"\n              (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n            >\n              <mat-icon>delete_outline</mat-icon>\n            </button>\n\n            <!-- add button -->\n            @if (!canForward && canConfirmAndAdd && row.validator?.valid) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_ADD' | translate\"\n                (click)=\"confirmAndAddClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>add</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button\n                class=\"mat-row-action-button-navigation\"\n                (focus)=\"forward.emit({ event: $event, row: row })\"\n              ></button>\n            }\n\n            <!-- existing row -->\n          } @else {\n            <!-- cancel button -->\n            @if (canCancel && row.validator?.dirty) {\n              <button\n                mat-icon-button\n                color=\"light\"\n                [title]=\"'COMMON.BTN_UNDO' | translate\"\n                (click)=\"cancelOrDeleteClick.emit({ event: $event, row: row })\"\n              >\n                <mat-icon>undo</mat-icon>\n              </button>\n            }\n\n            <!-- next button (invisible - focusable only) -->\n            @if (canForward && row.validator?.valid) {\n              <button\n                class=\"mat-row-action-button-navigation\"\n                (focus)=\"forward.emit({ event: $event, row: row })\"\n              ></button>\n            }\n          }\n        } @else {\n          <!-- dirty icon -->\n          @if (dirtyIcon && row.validator?.dirty) {\n            <ion-icon [name]=\"dirtyIcon\" color=\"accent\" class=\"dirty-icon\"></ion-icon>\n          }\n\n          <!-- backward button (invisible - focusable only) -->\n          @if (canBackward) {\n            <button\n              class=\"mat-row-action-button-navigation\"\n              (focus)=\"backward.emit({ event: $event, row: row })\"\n            ></button>\n          }\n        }\n\n        <ng-container *ngTemplateOutlet=\"cellTemplate; context: { $implicit: row }\"></ng-container>\n      </mat-cell>\n\n      <mat-footer-cell *matFooterCellDef>\n        <ng-content select=\"[matFooter]\"></ng-content>\n      </mat-footer-cell>\n    }\n  }\n</ng-container>\n", styles: [".mat-column-actions .mat-row-action-button-navigation{color:transparent;position:relative;top:0;margin:0!important;padding:0!important;width:0!important;height:1px}.mat-column-actions .mat-row-action-button-navigation .mat-mdc-button-touch-target{width:0!important;height:1px}\n"] }]
         }], ctorParameters: () => [{ type: i1$7.MatTable }, { type: i0.ChangeDetectorRef }], propDecorators: { columnDef: [{
                 type: ViewChild,
                 args: [MatColumnDef]
@@ -39894,6 +39895,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], style: [{
                 type: Input
+            }], showPendingSpinner: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
             }], stickyEnd: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -40248,7 +40252,7 @@ class AppPropertiesTable extends AppInMemoryTable {
         this.markRowAsDirty();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppPropertiesTable, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: PropertyEntityValidator }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\" [title]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"emitRefresh()\">\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()\" *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\n      [matBadge]=\"filterCriteriaCount\"\n      [matBadgeHidden]=\"filterIsEmpty\"\n      matBadgeColor=\"accent\"\n      matBadgeSize=\"small\"\n      matBadgePosition=\"above after\"\n      aria-hidden=\"false\"\n    >\n      filter_list_alt\n    </mat-icon>\n  </button>\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.ion-no-padding]=\"mobile\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n  >\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"emitRefresh()\">\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\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\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\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        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      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\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\n      #table\n      mat-table\n      matSort\n      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\" class=\"ion-padding-start\">\n          {{ row.currentData | propertyGet: 'definition.label' }}\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <app-row-field\n        name=\"value\"\n        floatLabel=\"never\"\n        [definitionFn]=\"definitionByRow\"\n        [headerI18n]=\"i18nColumnPrefix + 'VALUE'\"\n        [required]=\"true\"\n      ></app-row-field>\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\n            type=\"button\"\n            mat-icon-button\n            *ngIf=\"\n              !mobile &&\n              !disabled &&\n              (row.validator | formGetValue: 'value') !== (row.validator | formGetValue: 'definition').defaultValue\n            \"\n            [class.visible-hover-row]=\"!mobile\"\n            [tabindex]=\"-1\"\n            [title]=\"'SETTINGS.BTN_RESET_PROPERTY' | translate\"\n            (click)=\"resetProperty($event, row)\"\n          >\n            <mat-icon>undo</mat-icon>\n          </button>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *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\"\n      ></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", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: AppRowField, selector: "app-row-field", inputs: ["name", "definition", "definitionFn", "headerI18n", "sortable", "resizable", "required", "readonly", "sticky", "draggable", "disabled", "placeholder", "compact", "floatLabel", "appearance", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug"] }, { kind: "pipe", type: i3$1.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: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", 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  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\" [title]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"emitRefresh()\">\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()\" *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\n      [matBadge]=\"filterCriteriaCount\"\n      [matBadgeHidden]=\"filterIsEmpty\"\n      matBadgeColor=\"accent\"\n      matBadgeSize=\"small\"\n      matBadgePosition=\"above after\"\n      aria-hidden=\"false\"\n    >\n      filter_list_alt\n    </mat-icon>\n  </button>\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\n  <!-- search -->\n  <mat-expansion-panel\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.ion-no-padding]=\"mobile\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n  >\n    <form class=\"form-container\" [formGroup]=\"filterForm\" (ngSubmit)=\"emitRefresh()\">\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\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\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\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        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      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\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\n      #table\n      mat-table\n      matSort\n      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\" class=\"ion-padding-start\">\n          {{ row.currentData | propertyGet: 'definition.label' }}\n        </td>\n      </ng-container>\n\n      <!-- value column -->\n      <app-row-field\n        name=\"value\"\n        floatLabel=\"never\"\n        [definitionFn]=\"definitionByRow\"\n        [headerI18n]=\"i18nColumnPrefix + 'VALUE'\"\n        [required]=\"true\"\n      ></app-row-field>\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\n            type=\"button\"\n            mat-icon-button\n            *ngIf=\"\n              !mobile &&\n              !disabled &&\n              (row.validator | formGetValue: 'value') !== (row.validator | formGetValue: 'definition').defaultValue\n            \"\n            [class.visible-hover-row]=\"!mobile\"\n            [tabindex]=\"-1\"\n            [title]=\"'SETTINGS.BTN_RESET_PROPERTY' | translate\"\n            (click)=\"resetProperty($event, row)\"\n          >\n            <mat-icon>undo</mat-icon>\n          </button>\n        </ng-template>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *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\"\n      ></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", styles: [""], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "showPendingSpinner", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: AppRowField, selector: "app-row-field", inputs: ["name", "definition", "definitionFn", "headerI18n", "sortable", "resizable", "required", "readonly", "sticky", "draggable", "disabled", "placeholder", "compact", "floatLabel", "appearance", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug"] }, { kind: "pipe", type: i3$1.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: FormGetValuePipe, name: "formGetValue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppPropertiesTable, decorators: [{
             type: Component,
@@ -44630,7 +44634,7 @@ class UserTokenTable extends AppInMemoryTable {
         this.defaultScope = config.getProperty(CORE_CONFIG_OPTIONS.DEFAULT_AUTH_API_TOKEN_SCOPE);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserTokenTable, deps: [{ token: i0.Injector }, { token: i1$8.ValidatorService }, { token: ConfigService }, { token: ENVIRONMENT }, { token: APP_USER_TOKEN_SCOPES, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UserTokenTable, selector: "app-user-token-table", inputs: { useSticky: "useSticky" }, providers: [{ provide: ValidatorService, useClass: UserTokenValidatorService }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar>\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\" [title]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"emitRefresh()\">\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  @if (selection | isEmptySelection) {\n    <button\n      mat-icon-button\n      *ngIf=\"canEdit && !mobile\"\n      [title]=\"'COMMON.BTN_ADD' | translate\"\n      (click)=\"addToken($event)\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  } @else {\n    <button mat-icon-button [title]=\"'COMMON.BTN_DELETE' | translate\" (click)=\"deleteSelection($event)\">\n      <mat-icon>delete_outline</mat-icon>\n    </button>\n  }\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\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\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox\n            (change)=\"$event ? masterToggle() : null\"\n            [checked]=\"this | isAllSelected\"\n            [indeterminate]=\"this | isNotAllSelected\"\n          ></mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"$event ? selection.toggle(row) : null\"\n            [checked]=\"selection | isSelected: row\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"cdk-visually-hidden\">\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"cdk-visually-hidden\">{{ row.currentData.id }}</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>{{ i18nColumnPrefix + 'NAME' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ (row.currentData | propertyGet: 'name') || (i18nColumnPrefix + 'UNKNOWN' | translate) }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"scopes\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'SCOPES' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ display(row.currentData | propertyGet: 'scopes') }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'CREATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet: 'creationDate' | dateFormat: { time: true } }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"expirationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'EXPIRATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet: 'expirationDate' | dateFormat: { time: true } }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"lastUsedDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'LAST_USED_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet: 'lastUsedDate' | dateFormat: { time: true } }}\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"useSticky\"\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        [canCancel]=\"false\"\n      ></app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *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\"\n      ></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-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addToken($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-cell-date-time{width:180px}.mat-column-id{width:90px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.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$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UserTokenTable, selector: "app-user-token-table", inputs: { useSticky: "useSticky" }, providers: [{ provide: ValidatorService, useClass: UserTokenValidatorService }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar>\n  <!-- Refresh -->\n  <button mat-icon-button *ngIf=\"!mobile\" [title]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"emitRefresh()\">\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  @if (selection | isEmptySelection) {\n    <button\n      mat-icon-button\n      *ngIf=\"canEdit && !mobile\"\n      [title]=\"'COMMON.BTN_ADD' | translate\"\n      (click)=\"addToken($event)\"\n    >\n      <mat-icon>add</mat-icon>\n    </button>\n  } @else {\n    <button mat-icon-button [title]=\"'COMMON.BTN_DELETE' | translate\" (click)=\"deleteSelection($event)\">\n      <mat-icon>delete_outline</mat-icon>\n    </button>\n  }\n</mat-toolbar>\n\n<ion-content class=\"ion-no-padding\">\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\n      #table\n      mat-table\n      matSort\n      matSortDisableClear\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      [trackBy]=\"trackByFn\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox\n            (change)=\"$event ? masterToggle() : null\"\n            [checked]=\"this | isAllSelected\"\n            [indeterminate]=\"this | isNotAllSelected\"\n          ></mat-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!canEdit\">\n          <mat-checkbox\n            (click)=\"$event.stopPropagation()\"\n            (change)=\"$event ? selection.toggle(row) : null\"\n            [checked]=\"selection | isSelected: row\"\n          ></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"useSticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"cdk-visually-hidden\">\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"cdk-visually-hidden\">{{ row.currentData.id }}</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>{{ i18nColumnPrefix + 'NAME' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ (row.currentData | propertyGet: 'name') || (i18nColumnPrefix + 'UNKNOWN' | translate) }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"scopes\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>{{ i18nColumnPrefix + 'SCOPES' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          {{ display(row.currentData | propertyGet: 'scopes') }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'CREATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet: 'creationDate' | dateFormat: { time: true } }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"expirationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'EXPIRATION_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet: 'expirationDate' | dateFormat: { time: true } }}\n        </td>\n      </ng-container>\n\n      <ng-container matColumnDef=\"lastUsedDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header class=\"mat-cell-date-time\">\n          <ion-label>{{ i18nColumnPrefix + 'LAST_USED_DATE' | translate }}</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-cell-date-time\">\n          {{ row.currentData | propertyGet: 'lastUsedDate' | dateFormat: { time: true } }}\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"useSticky\"\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        [canCancel]=\"false\"\n      ></app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *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\"\n      ></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-fab slot=\"fixed\" vertical=\"bottom\" horizontal=\"end\" *ngIf=\"mobile\">\n  <ion-fab-button color=\"tertiary\" (click)=\"addToken($event)\">\n    <ion-icon name=\"add\"></ion-icon>\n  </ion-fab-button>\n</ion-fab>\n", styles: [".mat-cell-date-time{width:180px}.mat-column-id{width:90px}\n"], dependencies: [{ kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.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$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i10$2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "showPendingSpinner", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: PropertyGetPipe, name: "propertyGet" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UserTokenTable, decorators: [{
             type: Component,
@@ -46959,7 +46963,7 @@ class UsersPage extends AppTable {
     }
     getDisplayValueFn = FormFieldDefinitionUtils.getDisplayValueFn;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UsersPage, deps: [{ token: i0.Injector }, { token: i1$3.UntypedFormBuilder }, { token: AccountService }, { token: i1$8.ValidatorService }, { token: ConfigService }, { token: PersonService }, { token: MessageService }, { token: MenuService }, { token: i2$1.ModalController }, { token: ENVIRONMENT }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UsersPage, selector: "app-users-table", inputs: { showUsernameColumn: "showUsernameColumn", showUsernameExtranetColumn: "showUsernameExtranetColumn", showEmailColumn: "showEmailColumn", showPubkeyColumn: "showPubkeyColumn", showCreationDateColumn: "showCreationDateColumn", showUpdateDateColumn: "showUpdateDateColumn", title: "title", canSendMessage: ["canSendMessage", "canSendMessage", booleanAttribute], canEdit: ["canEdit", "canEdit", booleanAttribute], compact: ["compact", "compact", booleanAttribute], usePageSettings: ["usePageSettings", "usePageSettings", booleanAttribute], sticky: ["sticky", "sticky", booleanAttribute], stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], canDownload: ["canDownload", "canDownload", booleanAttribute], inModal: ["inModal", "inModal", booleanAttribute], showFooter: ["showFooter", "showFooter", booleanAttribute], showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showPaginator: ["showPaginator", "showPaginator", booleanAttribute] }, providers: [{ provide: ValidatorService, useExisting: PersonValidatorService }], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  [title]=\"(title || 'USER.LIST.TITLE') | translate\"\n  color=\"primary\"\n  [canGoBack]=\"false\"\n  [class.cdk-visible-hidden]=\"!showToolbar\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- Compose message -->\n    <button\n      mat-icon-button\n      *ngIf=\"canSendMessage\"\n      [title]=\"'USER.LIST.BTN_SEND_MESSAGE' | translate\"\n      (click)=\"openComposeMessageModal($event)\"\n    >\n      <ion-icon name=\"mail\" slot=\"icon-only\"></ion-icon>\n    </button>\n\n    @if (selection | isEmptySelection) {\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- Refresh -->\n      <button mat-icon-button *ngIf=\"!mobile\" [title]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"emitRefresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *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\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\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    } @else {\n      <!-- delete -->\n      <button\n        mat-icon-button\n        class=\"hidden-xs hidden-sm\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n    }\n\n    @if (!mobile && (canDownload || canDebug)) {\n      <button mat-icon-button [title]=\"'COMMON.BTN_OPTIONS' | translate\" [matMenuTriggerFor]=\"toolbarOptionsMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Toolbar option menu -->\n<mat-menu #toolbarOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <ng-template matMenuContent>\n  <!-- export button -->\n  @if (canDownload) {\n    <button mat-menu-item (click)=\"exportToCsv($event)\">\n      <mat-icon>download</mat-icon>\n      <ion-label translate>FILE.CSV.BTN_DOWNLOAD_HELP</ion-label>\n    </button>\n  }\n\n  <!-- Debug only: Test select users modal -->\n  @if (canDebug) {\n    <mat-divider></mat-divider>\n\n    <button mat-menu-item #menuTrigger=\"matMenuTrigger\" (mouseenter)=\"menuTrigger.openMenu()\" [matMenuTriggerFor]=\"debugMenu\">\n      <mat-icon><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>\n    </button>\n  }\n  </ng-template>\n</mat-menu>\n\n<!-- debug menu -->\n<mat-menu #debugMenu=\"matMenu\">\n  <ng-template matMenuContent>\n\n    <button mat-menu-item (click)=\"devToggleDebug()\">\n      <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</ion-label>\n    </button>\n  </ng-template>\n</mat-menu>\n\n<ion-content class=\"ion-no-padding\">\n  <!-- error -->\n  <ion-item\n    *ngIf=\"mobile && (errorSubject | async); let error\"\n    lines=\"none\"\n    class=\"hidden-sm hidden-xs hidden-mobile\"\n    @slideUpDownAnimation\n  >\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 }}\n          <br />\n          loadingSubject: {{ loading }}\n          <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)=\"emitRefresh()\">\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\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\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\">\n                  <i><span translate>COMMON.EMPTY_OPTION</span></i>\n                </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\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.statusId)\"\n                [hidden]=\"filterForm.controls.statusId.disabled || !filterForm.controls.statusId.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- user profiles -->\n            <mat-chips-field\n              formControlName=\"userProfiles\"\n              [placeholder]=\"'USER.PROFILES' | translate\"\n              chipColor=\"accent\"\n              [items]=\"userProfileList\"\n              [displayAttributes]=\"['name']\"\n              [clearable]=\"true\">\n            </mat-chips-field>\n          </ion-col>\n        </ion-row>\n\n        <!-- Additional fields filters -->\n        <ion-row *ngIf=\"filterableAdditionalFields && filterableAdditionalFields.length > 0\">\n          <ion-col *ngFor=\"let field of filterableAdditionalFields\" size=\"12\" size-md=\"6\" size-lg=\"4\">\n            <app-form-field\n              [definition]=\"field\"\n              [formControlName]=\"field.key\"\n              [clearable]=\"true\"\n              floatLabel=\"auto\">\n            </app-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) === true || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button\n        mat-button\n        fill=\"clear\"\n        color=\"dark\"\n        (click)=\"filterExpansionPanel.close()\"\n        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- error -->\n  @if (mobile && (errorSubject | async); as error) {\n    <ion-item 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\n  <div class=\"table-container\" [class.has-toolbar]=\"showToolbar\"\n       [class.has-paginator]=\"showPaginator\" [class.has-form-buttons]=\"showFormButtons\">\n    <table\n      #table\n      mat-table\n      matSort\n      [class.compact]=\"compact\"\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      matSortDisableClear\n      [trackBy]=\"trackByFn\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox\n            (change)=\"$event ? masterToggle() : null\"\n            [checked]=\"this | isAllSelected\"\n            [indeterminate]=\"this | isNotAllSelected\"\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\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <ion-label>{{ row.currentData.id }}</ion-label>\n        </td>\n      </ng-container>\n\n      <!-- avatar Column -->\n      <ng-container matColumnDef=\"avatar\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <ion-avatar [style.background-color]=\"'white'\">\n            @if (row.currentData.avatar; as avatarUrl) {\n              <ion-img [src]=\"avatarUrl\"></ion-img>\n            } @else {\n              <svg width=\"39\" height=\"39\" [data-jdenticon-value]=\"row.currentData.id\"></svg>\n            }\n          </ion-avatar>\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          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['lastName']\"\n                [placeholder]=\"'USER.LAST_NAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'lastName'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n              <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('minlength')\">\n                <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'lastName' }}\n            </ion-label>\n          }\n        </td>\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\" (click)=\"focusColumn = 'firstName'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['firstName']\"\n                [placeholder]=\"'USER.FIRST_NAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'firstName'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n              <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('minlength')\">\n                <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'firstName' }}\n            </ion-label>\n          }\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          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['email']\"\n                [placeholder]=\"'USER.EMAIL' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'email'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['email'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </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          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'email' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- additional fields -->\n      @for (definition of additionalFields; track definition.key) {\n        <ng-container [matColumnDef]=\"definition.key\">\n          <th mat-header-cell *matHeaderCellDef>\n            <span>{{ definition.label | translate }}</span>\n          </th>\n          <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = definition.key\">\n            @if (row.editing) {\n              <app-form-field\n                floatLabel=\"never\"\n                [definition]=\"definition\"\n                [formControl]=\"row.validator.controls[definition.key]\"\n                [required]=\"definition.extra?.users?.required\"\n                [autofocus]=\"row.editing && focusColumn === definition.key\"\n              ></app-form-field>\n            }\n            @else {\n              <ion-label appAutoTitle>{{ row.validator | formGetValue: definition.key | displayWith: getDisplayValueFn(definition) }}</ion-label>\n            }\n          </td>\n        </ng-container>\n      }\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\" (click)=\"focusColumn = 'profile'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <mat-select\n                [formControl]=\"row.validator | formGetControl: 'mainProfile'\"\n                [placeholder]=\"'USER.PROFILE' | translate\"\n              >\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>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            @let profile = row.validator | formGetValue: 'mainProfile';\n            @if (profile) {\n              <ion-label appAutoTitle>{{ 'USER.PROFILE_ENUM.' + profile | uppercase | translate }}</ion-label>\n            }\n          }\n\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\" (click)=\"focusColumn = 'status'\">\n          @if (row.editing) {\n            @let control = row.validator | formGetControl: 'statusId';\n            <mat-form-field>\n              <mat-select\n                [formControl]=\"control\"\n                [placeholder]=\"'REFERENTIAL.STATUS' | translate\"\n              >\n                <mat-select-trigger>\n                  <span *ngIf=\"control.value >= 0\">\n                    {{ statusById[control.value]?.label | translate }}\n                  </span>\n                </mat-select-trigger>\n                @for (item of statusList; track item.id) {\n                  <mat-option [value]=\"item.id\">\n                    <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                    {{ item.label | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              <mat-error *ngIf=\"control.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            @let statusId = row.validator | formGetValue: 'statusId';\n            @if (statusId >= 0) {\n              <ion-label appAutoTitle>\n                {{ (statusById | mapGet: statusId)?.label | translate }}\n              </ion-label>\n            }\n          }\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\" (click)=\"focusColumn = 'username'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls.username\"\n                [placeholder]=\"'USER.USERNAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'username'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls.username.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'username' }}\n            </ion-label>\n          }\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\" (click)=\"focusColumn = 'usernameExtranet'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input\n              matInput\n              [formControl]=\"row.validator.controls.usernameExtranet\"\n              [placeholder]=\"'USER.USERNAME_EXTRANET' | translate\"\n              [readonly]=\"!row.editing\"\n              [appAutofocus]=\"row.editing && focusColumn === 'usernameExtranet'\"\n            />\n            <mat-error *ngIf=\"row.validator.controls.usernameExtranet.hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </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\n          mat-cell\n          *matCellDef=\"let row\"\n          [title]=\"row.validator.controls.pubkey.valueChanges | async\"\n          (click)=\"focusColumn = 'pubkey'\"\n        >\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input\n              matInput\n              [formControl]=\"row.validator.controls['pubkey']\"\n              [placeholder]=\"'USER.PUBKEY' | translate\"\n              [readonly]=\"!row.editing\"\n              autocomplete=\"off\"\n            />\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </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      <!-- Creation date column -->\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>USER.CREATION_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text class=\"ion-text-end\" color=\"medium\" *ngIf=\"row.id !== -1\">\n            {{ row.currentData.creationDate | dateFormat: { time: true } }}\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Update date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>USER.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text class=\"ion-text-end\" color=\"medium\" *ngIf=\"row.id !== -1\">\n            {{ row.currentData.updateDate | dateFormat: { time: true } }}\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\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      >\n        <!-- table options menu -->\n        <button\n          matHeader\n          mat-icon-button\n          [title]=\"'COMMON.BTN_OPTIONS' | translate\"\n          [matMenuTriggerFor]=\"tableOptionsMenu\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-error]=\"row.validator.invalid\"\n        [class.mat-row-dirty]=\"row.currentData.dirty\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-row-selected]=\"row.editing || (!canEdit && selection | isSelected: row)\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"!row.validator?.valid\"\n      ></tr>\n    </table>\n\n    <!-- D\u00E9clencheur invisible pour le mat-menu -->\n\n    @if (loadingSubject | async) {\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    } @else if (totalRowCount === 0) {\n      <ion-item>\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    }\n  </div>\n</ion-content>\n\n<!-- Table options menu -->\n<mat-menu #tableOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <!-- display columns -->\n  <button mat-menu-item (click)=\"openSelectColumnsModal($event)\">\n    <mat-icon>view_column</mat-icon>\n    <ion-label translate>COMMON.DISPLAYED_COLUMNS_DOTS</ion-label>\n  </button>\n\n  @if (usePageSettings) {\n    <mat-divider></mat-divider>\n\n    <!-- Compact mode -->\n    <button mat-menu-item (click)=\"toggleCompactMode()\">\n      <mat-icon>{{ compact ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n      <ion-label translate>COMMON.BTN_COMPACT_ROWS</ion-label>\n    </button>\n  }\n</mat-menu>\n\n<ion-footer>\n  <mat-paginator *ngIf=\"showPaginator\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  @if (showFormButtons) {\n    <app-form-buttons-bar\n      (onCancel)=\"cancel($event)\"\n      (onSave)=\"save()\"\n      [disabled]=\"(loadingSubject | async) === true || (dirtySubject | async) !== true\"\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    </app-form-buttons-bar>\n  }\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}ion-content{height:calc(100% - var(--table-offset, 0px))}.table-container{height:100%}.table-container.has-toolbar{--table-toolbar-height: var(--mat-toolbar-height, 64px)}.table-container.has-paginator{--table-paginator-height: var(--app-paginator-height, 34px)}.table-container.has-form-buttons{--form-buttons-height: var(--ion-toolbar-height, 56px)}.mat-mdc-table .mat-column-avatar{--avatar-width: 40px;--avatar-height: 40px;width:calc(var(--avatar-width) + 10px)}.mat-mdc-table .mat-column-avatar ion-avatar{--border-radius: 5px !important;--border-width: 1px !important;--border-color: rgba(var(--ion-color-secondary-rgb), .5) !important;height:var(--avatar-height);max-height:var(--avatar-height);width:var(--avatar-width);max-width:var(--avatar-width);border:solid var(--border-width) var(--border-color);margin:0 2px}.mat-mdc-table .mat-column-avatar ion-avatar svg{max-height:calc(var(--avatar-height) - 1px);max-width:calc(var(--avatar-width) - 1px)}.mat-mdc-table.compact{--mat-row-height: 33px}.mat-mdc-table.compact .mat-column-avatar{--avatar-width: calc(var(--mat-row-height, 33px) - 4px);--avatar-height: calc(var(--mat-row-height, 33px) - 4px)}.mat-mdc-table .mat-column-id{min-width:50px;max-width:120px;padding-right:var(--mat-cell-horizontal-padding, 4px)}.mat-mdc-table .mat-column-lastName,.mat-mdc-table .mat-column-firstName{min-width:80px}.mat-mdc-table .mat-column-email,.mat-mdc-table .mat-column-pubkey,.mat-mdc-table .mat-column-department{min-width:180px}.mat-mdc-table .mat-column-profile{min-width:110px}.mat-mdc-table .mat-column-status,.mat-mdc-table .mat-column-creationDate,.mat-mdc-table .mat-column-updateDate{min-width:130px}\n"], dependencies: [{ kind: "directive", type: i4$3.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2$1.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$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.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$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "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: i6$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "colSizes", "separatorKeysCodes", "appearance", "subscriptSizing", "class", "filter", "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: "ion-label[appAutoTitle], mat-label[appAutoTitle]", inputs: ["appAutoTitle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: MapGetPipe, name: "mapGet" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: DisplayWithPipe, name: "displayWith" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }], animations: [slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: UsersPage, selector: "app-users-table", inputs: { showUsernameColumn: "showUsernameColumn", showUsernameExtranetColumn: "showUsernameExtranetColumn", showEmailColumn: "showEmailColumn", showPubkeyColumn: "showPubkeyColumn", showCreationDateColumn: "showCreationDateColumn", showUpdateDateColumn: "showUpdateDateColumn", title: "title", canSendMessage: ["canSendMessage", "canSendMessage", booleanAttribute], canEdit: ["canEdit", "canEdit", booleanAttribute], compact: ["compact", "compact", booleanAttribute], usePageSettings: ["usePageSettings", "usePageSettings", booleanAttribute], sticky: ["sticky", "sticky", booleanAttribute], stickyEnd: ["stickyEnd", "stickyEnd", booleanAttribute], canDownload: ["canDownload", "canDownload", booleanAttribute], inModal: ["inModal", "inModal", booleanAttribute], showFooter: ["showFooter", "showFooter", booleanAttribute], showToolbar: ["showToolbar", "showToolbar", booleanAttribute], showPaginator: ["showPaginator", "showPaginator", booleanAttribute] }, providers: [{ provide: ValidatorService, useExisting: PersonValidatorService }], viewQueries: [{ propertyName: "filterExpansionPanel", first: true, predicate: MatExpansionPanel, descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<app-toolbar\n  [title]=\"(title || 'USER.LIST.TITLE') | translate\"\n  color=\"primary\"\n  [canGoBack]=\"false\"\n  [class.cdk-visible-hidden]=\"!showToolbar\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n>\n  <ion-buttons slot=\"end\">\n    <!-- Compose message -->\n    <button\n      mat-icon-button\n      *ngIf=\"canSendMessage\"\n      [title]=\"'USER.LIST.BTN_SEND_MESSAGE' | translate\"\n      (click)=\"openComposeMessageModal($event)\"\n    >\n      <ion-icon name=\"mail\" slot=\"icon-only\"></ion-icon>\n    </button>\n\n    @if (selection | isEmptySelection) {\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- Refresh -->\n      <button mat-icon-button *ngIf=\"!mobile\" [title]=\"'COMMON.BTN_REFRESH' | translate\" (click)=\"emitRefresh()\">\n        <mat-icon>refresh</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *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\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\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    } @else {\n      <!-- delete -->\n      <button\n        mat-icon-button\n        class=\"hidden-xs hidden-sm\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n    }\n\n    @if (!mobile && (canDownload || canDebug)) {\n      <button mat-icon-button [title]=\"'COMMON.BTN_OPTIONS' | translate\" [matMenuTriggerFor]=\"toolbarOptionsMenu\">\n        <mat-icon>more_vert</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n\n<!-- Toolbar option menu -->\n<mat-menu #toolbarOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <ng-template matMenuContent>\n  <!-- export button -->\n  @if (canDownload) {\n    <button mat-menu-item (click)=\"exportToCsv($event)\">\n      <mat-icon>download</mat-icon>\n      <ion-label translate>FILE.CSV.BTN_DOWNLOAD_HELP</ion-label>\n    </button>\n  }\n\n  <!-- Debug only: Test select users modal -->\n  @if (canDebug) {\n    <mat-divider></mat-divider>\n\n    <button mat-menu-item #menuTrigger=\"matMenuTrigger\" (mouseenter)=\"menuTrigger.openMenu()\" [matMenuTriggerFor]=\"debugMenu\">\n      <mat-icon><ion-icon name=\"bug\"></ion-icon></mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_DEBUG_DOTS</ion-label>\n    </button>\n  }\n  </ng-template>\n</mat-menu>\n\n<!-- debug menu -->\n<mat-menu #debugMenu=\"matMenu\">\n  <ng-template matMenuContent>\n\n    <button mat-menu-item (click)=\"devToggleDebug()\">\n      <mat-icon>{{ debug ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n      <ion-label translate>COMMON.DEBUG.BTN_ENABLE_DEBUG</ion-label>\n    </button>\n  </ng-template>\n</mat-menu>\n\n<ion-content class=\"ion-no-padding\">\n  <!-- error -->\n  <ion-item\n    *ngIf=\"mobile && (errorSubject | async); let error\"\n    lines=\"none\"\n    class=\"hidden-sm hidden-xs hidden-mobile\"\n    @slideUpDownAnimation\n  >\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 }}\n          <br />\n          loadingSubject: {{ loading }}\n          <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)=\"emitRefresh()\">\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\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\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\">\n                  <i><span translate>COMMON.EMPTY_OPTION</span></i>\n                </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\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.statusId)\"\n                [hidden]=\"filterForm.controls.statusId.disabled || !filterForm.controls.statusId.value\"\n              >\n                <mat-icon>close</mat-icon>\n              </button>\n            </mat-form-field>\n          </ion-col>\n\n          <ion-col>\n            <!-- user profiles -->\n            <mat-chips-field\n              formControlName=\"userProfiles\"\n              [placeholder]=\"'USER.PROFILES' | translate\"\n              chipColor=\"accent\"\n              [items]=\"userProfileList\"\n              [displayAttributes]=\"['name']\"\n              [clearable]=\"true\">\n            </mat-chips-field>\n          </ion-col>\n        </ion-row>\n\n        <!-- Additional fields filters -->\n        <ion-row *ngIf=\"filterableAdditionalFields && filterableAdditionalFields.length > 0\">\n          <ion-col *ngFor=\"let field of filterableAdditionalFields\" size=\"12\" size-md=\"6\" size-lg=\"4\">\n            <app-form-field\n              [definition]=\"field\"\n              [formControlName]=\"field.key\"\n              [clearable]=\"true\"\n              floatLabel=\"auto\">\n            </app-form-field>\n          </ion-col>\n        </ion-row>\n      </ion-grid>\n    </form>\n\n    <mat-action-row>\n      <!-- Counter  -->\n      <ion-label\n        [hidden]=\"(loadingSubject | async) === true || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <!-- Close panel -->\n      <ion-button\n        mat-button\n        fill=\"clear\"\n        color=\"dark\"\n        (click)=\"filterExpansionPanel.close()\"\n        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n        [disabled]=\"loadingSubject | async\"\n      >\n        <ion-text translate>COMMON.BTN_APPLY</ion-text>\n      </ion-button>\n    </mat-action-row>\n  </mat-expansion-panel>\n\n  <!-- error -->\n  @if (mobile && (errorSubject | async); as error) {\n    <ion-item 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\n  <div class=\"table-container\" [class.has-toolbar]=\"showToolbar\"\n       [class.has-paginator]=\"showPaginator\" [class.has-form-buttons]=\"showFormButtons\">\n    <table\n      #table\n      mat-table\n      matSort\n      [class.compact]=\"compact\"\n      [dataSource]=\"dataSource\"\n      [matSortActive]=\"defaultSortBy\"\n      [matSortDirection]=\"defaultSortDirection\"\n      matSortDisableClear\n      [trackBy]=\"trackByFn\"\n    >\n      <ng-container matColumnDef=\"select\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]=\"!inlineEdition\">\n          <mat-checkbox\n            (change)=\"$event ? masterToggle() : null\"\n            [checked]=\"this | isAllSelected\"\n            [indeterminate]=\"this | isNotAllSelected\"\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\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id Column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label>#</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <ion-label>{{ row.currentData.id }}</ion-label>\n        </td>\n      </ng-container>\n\n      <!-- avatar Column -->\n      <ng-container matColumnDef=\"avatar\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef></th>\n        <td mat-cell *matCellDef=\"let row\">\n          <ion-avatar [style.background-color]=\"'white'\">\n            @if (row.currentData.avatar; as avatarUrl) {\n              <ion-img [src]=\"avatarUrl\"></ion-img>\n            } @else {\n              <svg width=\"39\" height=\"39\" [data-jdenticon-value]=\"row.currentData.id\"></svg>\n            }\n          </ion-avatar>\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          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['lastName']\"\n                [placeholder]=\"'USER.LAST_NAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'lastName'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n              <mat-error *ngIf=\"row.validator.controls['lastName'].hasError('minlength')\">\n                <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'lastName' }}\n            </ion-label>\n          }\n        </td>\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\" (click)=\"focusColumn = 'firstName'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['firstName']\"\n                [placeholder]=\"'USER.FIRST_NAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'firstName'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n              <mat-error *ngIf=\"row.validator.controls['firstName'].hasError('minlength')\">\n                <span>{{ 'ERROR.FIELD_MIN_LENGTH' | translate: { requiredLength: 2 } }}</span>\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'firstName' }}\n            </ion-label>\n          }\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          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls['email']\"\n                [placeholder]=\"'USER.EMAIL' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'email'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls['email'].hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </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          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'email' }}\n            </ion-label>\n          }\n        </td>\n      </ng-container>\n\n      <!-- additional fields -->\n      @for (definition of additionalFields; track definition.key) {\n        <ng-container [matColumnDef]=\"definition.key\">\n          <th mat-header-cell *matHeaderCellDef>\n            <span>{{ definition.label | translate }}</span>\n          </th>\n          <td mat-cell *matCellDef=\"let row\" (click)=\"focusColumn = definition.key\">\n            @if (row.editing) {\n              <app-form-field\n                floatLabel=\"never\"\n                [definition]=\"definition\"\n                [formControl]=\"row.validator.controls[definition.key]\"\n                [required]=\"definition.extra?.users?.required\"\n                [autofocus]=\"row.editing && focusColumn === definition.key\"\n              ></app-form-field>\n            }\n            @else {\n              <ion-label appAutoTitle>{{ row.validator | formGetValue: definition.key | displayWith: getDisplayValueFn(definition) }}</ion-label>\n            }\n          </td>\n        </ng-container>\n      }\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\" (click)=\"focusColumn = 'profile'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <mat-select\n                [formControl]=\"row.validator | formGetControl: 'mainProfile'\"\n                [placeholder]=\"'USER.PROFILE' | translate\"\n              >\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>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            @let profile = row.validator | formGetValue: 'mainProfile';\n            @if (profile) {\n              <ion-label appAutoTitle>{{ 'USER.PROFILE_ENUM.' + profile | uppercase | translate }}</ion-label>\n            }\n          }\n\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\" (click)=\"focusColumn = 'status'\">\n          @if (row.editing) {\n            @let control = row.validator | formGetControl: 'statusId';\n            <mat-form-field>\n              <mat-select\n                [formControl]=\"control\"\n                [placeholder]=\"'REFERENTIAL.STATUS' | translate\"\n              >\n                <mat-select-trigger>\n                  <span *ngIf=\"control.value >= 0\">\n                    {{ statusById[control.value]?.label | translate }}\n                  </span>\n                </mat-select-trigger>\n                @for (item of statusList; track item.id) {\n                  <mat-option [value]=\"item.id\">\n                    <mat-icon><ion-icon [name]=\"item.icon\"></ion-icon></mat-icon>\n                    {{ item.label | translate }}\n                  </mat-option>\n                }\n              </mat-select>\n              <mat-error *ngIf=\"control.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            @let statusId = row.validator | formGetValue: 'statusId';\n            @if (statusId >= 0) {\n              <ion-label appAutoTitle>\n                {{ (statusById | mapGet: statusId)?.label | translate }}\n              </ion-label>\n            }\n          }\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\" (click)=\"focusColumn = 'username'\">\n          @if (row.editing) {\n            <mat-form-field>\n              <input\n                matInput\n                [formControl]=\"row.validator.controls.username\"\n                [placeholder]=\"'USER.USERNAME' | translate\"\n                [readonly]=\"!row.editing\"\n                [appAutofocus]=\"row.editing && focusColumn === 'username'\"\n              />\n              <mat-error *ngIf=\"row.validator.controls.username.hasError('required')\" translate>\n                ERROR.FIELD_REQUIRED\n              </mat-error>\n            </mat-form-field>\n          } @else {\n            <ion-label appAutoTitle>\n              {{ row.validator | formGetValue: 'username' }}\n            </ion-label>\n          }\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\" (click)=\"focusColumn = 'usernameExtranet'\">\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input\n              matInput\n              [formControl]=\"row.validator.controls.usernameExtranet\"\n              [placeholder]=\"'USER.USERNAME_EXTRANET' | translate\"\n              [readonly]=\"!row.editing\"\n              [appAutofocus]=\"row.editing && focusColumn === 'usernameExtranet'\"\n            />\n            <mat-error *ngIf=\"row.validator.controls.usernameExtranet.hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </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\n          mat-cell\n          *matCellDef=\"let row\"\n          [title]=\"row.validator.controls.pubkey.valueChanges | async\"\n          (click)=\"focusColumn = 'pubkey'\"\n        >\n          <mat-form-field *ngIf=\"row.editing; else readonlyCell\">\n            <input\n              matInput\n              [formControl]=\"row.validator.controls['pubkey']\"\n              [placeholder]=\"'USER.PUBKEY' | translate\"\n              [readonly]=\"!row.editing\"\n              autocomplete=\"off\"\n            />\n            <mat-error *ngIf=\"row.validator.controls.pubkey.hasError('required')\" translate>\n              ERROR.FIELD_REQUIRED\n            </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      <!-- Creation date column -->\n      <ng-container matColumnDef=\"creationDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>USER.CREATION_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text class=\"ion-text-end\" color=\"medium\" *ngIf=\"row.id !== -1\">\n            {{ row.currentData.creationDate | dateFormat: { time: true } }}\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Update date column -->\n      <ng-container matColumnDef=\"updateDate\">\n        <th mat-header-cell *matHeaderCellDef mat-sort-header>\n          <ion-label translate>USER.UPDATE_DATE</ion-label>\n        </th>\n        <td mat-cell *matCellDef=\"let row\" class=\"mat-form-field-disabled\">\n          <ion-text class=\"ion-text-end\" color=\"medium\" *ngIf=\"row.id !== -1\">\n            {{ row.currentData.updateDate | dateFormat: { time: true } }}\n          </ion-text>\n        </td>\n      </ng-container>\n\n      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\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      >\n        <!-- table options menu -->\n        <button\n          matHeader\n          mat-icon-button\n          [title]=\"'COMMON.BTN_OPTIONS' | translate\"\n          [matMenuTriggerFor]=\"tableOptionsMenu\"\n        >\n          <mat-icon>more_vert</mat-icon>\n        </button>\n      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-error]=\"row.validator.invalid\"\n        [class.mat-row-dirty]=\"row.currentData.dirty\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-mdc-row-selected]=\"row.editing || (!canEdit && selection | isSelected: row)\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"!row.validator?.valid\"\n      ></tr>\n    </table>\n\n    <!-- D\u00E9clencheur invisible pour le mat-menu -->\n\n    @if (loadingSubject | async) {\n      <ion-item>\n        <ion-skeleton-text animated></ion-skeleton-text>\n      </ion-item>\n    } @else if (totalRowCount === 0) {\n      <ion-item>\n        <ion-text color=\"danger\" class=\"text-italic\" translate>COMMON.NO_RESULT</ion-text>\n      </ion-item>\n    }\n  </div>\n</ion-content>\n\n<!-- Table options menu -->\n<mat-menu #tableOptionsMenu=\"matMenu\" xPosition=\"after\">\n  <!-- display columns -->\n  <button mat-menu-item (click)=\"openSelectColumnsModal($event)\">\n    <mat-icon>view_column</mat-icon>\n    <ion-label translate>COMMON.DISPLAYED_COLUMNS_DOTS</ion-label>\n  </button>\n\n  @if (usePageSettings) {\n    <mat-divider></mat-divider>\n\n    <!-- Compact mode -->\n    <button mat-menu-item (click)=\"toggleCompactMode()\">\n      <mat-icon>{{ compact ? 'check_box' : 'check_box_outline_blank' }}</mat-icon>\n      <ion-label translate>COMMON.BTN_COMPACT_ROWS</ion-label>\n    </button>\n  }\n</mat-menu>\n\n<ion-footer>\n  <mat-paginator *ngIf=\"showPaginator\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  @if (showFormButtons) {\n    <app-form-buttons-bar\n      (onCancel)=\"cancel($event)\"\n      (onSave)=\"save()\"\n      [disabled]=\"(loadingSubject | async) === true || (dirtySubject | async) !== true\"\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    </app-form-buttons-bar>\n  }\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}ion-content{height:calc(100% - var(--table-offset, 0px))}.table-container{height:100%}.table-container.has-toolbar{--table-toolbar-height: var(--mat-toolbar-height, 64px)}.table-container.has-paginator{--table-paginator-height: var(--app-paginator-height, 34px)}.table-container.has-form-buttons{--form-buttons-height: var(--ion-toolbar-height, 56px)}.mat-mdc-table .mat-column-avatar{--avatar-width: 40px;--avatar-height: 40px;width:calc(var(--avatar-width) + 10px)}.mat-mdc-table .mat-column-avatar ion-avatar{--border-radius: 5px !important;--border-width: 1px !important;--border-color: rgba(var(--ion-color-secondary-rgb), .5) !important;height:var(--avatar-height);max-height:var(--avatar-height);width:var(--avatar-width);max-width:var(--avatar-width);border:solid var(--border-width) var(--border-color);margin:0 2px}.mat-mdc-table .mat-column-avatar ion-avatar svg{max-height:calc(var(--avatar-height) - 1px);max-width:calc(var(--avatar-width) - 1px)}.mat-mdc-table.compact{--mat-row-height: 33px}.mat-mdc-table.compact .mat-column-avatar{--avatar-width: calc(var(--mat-row-height, 33px) - 4px);--avatar-height: calc(var(--mat-row-height, 33px) - 4px)}.mat-mdc-table .mat-column-id{min-width:50px;max-width:120px;padding-right:var(--mat-cell-horizontal-padding, 4px)}.mat-mdc-table .mat-column-lastName,.mat-mdc-table .mat-column-firstName{min-width:80px}.mat-mdc-table .mat-column-email,.mat-mdc-table .mat-column-pubkey,.mat-mdc-table .mat-column-department{min-width:180px}.mat-mdc-table .mat-column-profile{min-width:110px}.mat-mdc-table .mat-column-status,.mat-mdc-table .mat-column-creationDate,.mat-mdc-table .mat-column-updateDate{min-width:130px}\n"], dependencies: [{ kind: "directive", type: i4$3.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.IonAvatar, selector: "ion-avatar" }, { kind: "component", type: i2$1.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$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.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$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonImg, selector: "ion-img", inputs: ["alt", "src"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i12.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i12.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i12.MatMenuContent, selector: "ng-template[matMenuContent]" }, { kind: "directive", type: i12.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i6$3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "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: i6$3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i9$1.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatChipsField, selector: "mat-chips-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "placeholder", "suggestFn", "required", "mobile", "readonly", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "itemSize", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "chipColor", "debug", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "hideRequiredMarker", "colSizes", "separatorKeysCodes", "appearance", "subscriptSizing", "class", "filter", "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: "ion-label[appAutoTitle], mat-label[appAutoTitle]", inputs: ["appAutoTitle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "backHref", "defaultBackHref", "hasValidate", "hasClose", "hasSearch", "canGoBack", "canShowMenu"], outputs: ["onValidate", "onClose", "onValidateAndClose", "onBackClick", "onSearch"] }, { kind: "component", type: AppFormField, selector: "app-form-field", inputs: ["definition", "readonly", "disabled", "formControl", "formControlName", "placeholder", "compact", "required", "hideRequiredMarker", "floatLabel", "label", "appearance", "subscriptSizing", "tabindex", "autofocus", "clearable", "chipColor", "class", "debug", "panelClass", "panelWidth"], outputs: ["keyup.enter"] }, { kind: "component", type: FormButtonsBarComponent, selector: "app-form-buttons-bar", inputs: ["disabled", "disabledCancel", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "showPendingSpinner", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "component", type: DebugComponent, selector: "app-debug", inputs: ["titlePrefix", "title", "enable", "expanded"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: NumberFormatPipe, name: "numberFormat" }, { kind: "pipe", type: MapGetPipe, name: "mapGet" }, { kind: "pipe", type: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: DisplayWithPipe, name: "displayWith" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }], animations: [slideUpDownAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UsersPage, decorators: [{
             type: Component,
@@ -50164,7 +50168,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\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table 2 (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *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\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\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\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        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      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\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\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\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 formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\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\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        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      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\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\n      #table\n      mat-table\n      matSort\n      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          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef>\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 *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\">\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\" (click)=\"focusColumn = 'name'\">\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 || focusColumn === 'name'\"\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 appAutoTitle>\n              {{\n                autocompleteFields.level?.displayWith(\n                  (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                ) ||\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-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])\n            \"\n            [compact]=\"true\"\n          ></mat-boolean-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-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            [floatLabel]=\"'never'\"\n            [style]=\"'radio'\"\n            [showRadio]=\"true\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-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      <ng-container matColumnDef=\"boolean3\">\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 3</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'button'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-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      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\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      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.invalid\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></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\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\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\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\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\" *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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.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$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "ion-label[appAutoTitle], mat-label[appAutoTitle]", inputs: ["appAutoTitle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "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", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$3.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$1.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: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], 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\n  color=\"primary\"\n  [canGoBack]=\"true\"\n  [hasValidate]=\"(loadingSubject | async) !== true && (dirtySubject | async) === true\"\n  (onValidate)=\"save()\"\n  [backHref]=\"'/testing'\"\n>\n  <ion-title>Table 2 (click to select)</ion-title>\n\n  <ion-buttons slot=\"end\">\n    @if (selection | isEmptySelection) {\n      <input matInput type=\"number\" step=\"1\" style=\"color: black; width: 50px\" [(ngModel)]=\"rowHeight\" />\n\n      <!-- Add -->\n      <button mat-icon-button *ngIf=\"canEdit && !mobile\" [title]=\"'COMMON.BTN_ADD' | translate\" (click)=\"addRow()\">\n        <mat-icon>add</mat-icon>\n      </button>\n\n      <!-- reset filter -->\n      <button mat-icon-button (click)=\"resetFilter()\" *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\n          *ngIf=\"filterCriteriaCount; else emptyFilter\"\n          [matBadge]=\"filterCriteriaCount\"\n          matBadgeColor=\"accent\"\n          matBadgeSize=\"small\"\n          matBadgePosition=\"above after\"\n          aria-hidden=\"false\"\n        >\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\" [disabled]=\"(dirtySubject | async) !== true\" (click)=\"save()\">\n        <mat-icon>save</mat-icon>\n      </button>\n    } @else {\n      <!-- if row selection -->\n      <!-- delete -->\n      <button\n        mat-icon-button\n        *ngIf=\"canEdit\"\n        [title]=\"'COMMON.BTN_DELETE' | translate\"\n        (click)=\"deleteSelection($event)\"\n      >\n        <mat-icon>delete</mat-icon>\n      </button>\n\n      <!-- duplicate -->\n      <button\n        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      >\n        <mat-icon>file_copy</mat-icon>\n      </button>\n    }\n  </ion-buttons>\n</app-toolbar>\n<ion-content class=\"ion-no-padding\">\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\n    #filterExpansionPanel\n    class=\"filter-panel\"\n    [class.filter-panel-floating]=\"filterPanelFloating\"\n    [class.filter-panel-pinned]=\"!filterPanelFloating\"\n  >\n    <form class=\"form-container ion-padding-top\" [formGroup]=\"filterForm\" (ngSubmit)=\"applyFilterAndClosePanel($event)\">\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 formControlName=\"searchText\" autocomplete=\"off\" />\n              <button\n                mat-icon-button\n                matSuffix\n                tabindex=\"-1\"\n                type=\"button\"\n                (click)=\"clearControlValue($event, filterForm.controls.searchText)\"\n                [hidden]=\"filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value\"\n              >\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\n        [hidden]=\"(loadingSubject | async) || filterForm.dirty\"\n        [color]=\"empty && 'danger'\"\n        class=\"ion-padding\"\n      >\n        {{\n          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')\n            | translate\n              : {\n                  count: (totalRowCount | numberFormat),\n                }\n        }}\n      </ion-label>\n\n      <div class=\"toolbar-spacer\"></div>\n\n      <button\n        mat-icon-button\n        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      >\n        <mat-icon>\n          <span style=\"transform: rotate(90deg)\">{{ filterPanelFloating ? '&#xbb;' : '&#xab;' }}</span>\n        </mat-icon>\n      </button>\n\n      <!-- Close panel -->\n      <ion-button mat-button fill=\"clear\" color=\"dark\" (click)=\"closeFilterPanel()\" [disabled]=\"loadingSubject | async\">\n        <ion-text translate>COMMON.BTN_CLOSE</ion-text>\n      </ion-button>\n\n      <!-- Search button -->\n      <ion-button\n        mat-button\n        [color]=\"filterForm.dirty ? 'tertiary' : 'dark'\"\n        [fill]=\"filterForm.dirty ? 'solid' : 'clear'\"\n        (click)=\"applyFilterAndClosePanel($event)\"\n      >\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\n      #table\n      mat-table\n      matSort\n      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          @if (selection | isMultipleSelection) {\n            <mat-checkbox\n              [checked]=\"this | isAllSelected\"\n              [indeterminate]=\"this | isNotAllSelected\"\n              (change)=\"$event ? masterToggle() : null\"\n            ></mat-checkbox>\n          }\n        </th>\n        <td mat-cell *matCellDef=\"let row\" [class.cdk-visually-hidden]=\"!checkBoxSelection\">\n          <mat-checkbox [checked]=\"selection | isSelected: row\" (click)=\"toggleSelectRow($event, row)\"></mat-checkbox>\n        </td>\n      </ng-container>\n\n      <!-- Id column -->\n      <ng-container matColumnDef=\"id\" [sticky]=\"sticky\">\n        <th mat-header-cell *matHeaderCellDef>\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 *ngIf=\"!readOnly && row.id === -1 && row.editing; else readOnlyId\">\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\" (click)=\"focusColumn = 'name'\">\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 || focusColumn === 'name'\"\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 appAutoTitle>\n              {{\n                autocompleteFields.level?.displayWith(\n                  (row.validator | formGetValue: 'levelId') || (row.currentData | propertyGet: 'levelId')\n                ) ||\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-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'checkbox'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean') || formBuilder.control(row.currentData['boolean'])\n            \"\n            [compact]=\"true\"\n          ></mat-boolean-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-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            [floatLabel]=\"'never'\"\n            [style]=\"'radio'\"\n            [showRadio]=\"true\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-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      <ng-container matColumnDef=\"boolean3\">\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 3</ion-label>\n          </span>\n        </th>\n        <td mat-cell *matCellDef=\"let row\">\n          <mat-boolean-field\n            *ngIf=\"!readOnly && row.editing; else readOnlyTemplate\"\n            floatLabel=\"never\"\n            [style]=\"'button'\"\n            [formControl]=\"\n              (row.validator | formGetControl: 'boolean2') || formBuilder.control(row.currentData['boolean2'])\n            \"\n          ></mat-boolean-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      <!-- Actions buttons column -->\n      <app-actions-column\n        [stickyEnd]=\"stickyEnd\"\n        [canCancel]=\"false\"\n        [style]=\"'table'\"\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      </app-actions-column>\n\n      <tr mat-header-row *matHeaderRowDef=\"displayedColumns; sticky: true\"></tr>\n      <tr\n        mat-row\n        *matRowDef=\"let row; columns: displayedColumns\"\n        [class.mat-row-selected]=\"row.editing\"\n        [class.mat-row-error]=\"row.invalid\"\n        [class.mat-row-disabled]=\"!row.editing\"\n        [class.mat-row-dirty]=\"row.dirty\"\n        (click)=\"clickRow($event, row)\"\n        (keydown.escape)=\"escapeEditingRow($event)\"\n        [cdkTrapFocus]=\"row.invalid\"\n      ></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\n      *ngIf=\"enableInfiniteScroll\"\n      [threshold]=\"mobile ? '10%' : '2%'\"\n      position=\"bottom\"\n      (ionInfinite)=\"fetchMore($event)\"\n    >\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\n    *ngIf=\"!enableInfiniteScroll\"\n    [length]=\"totalRowCount\"\n    [pageSize]=\"defaultPageSize\"\n    [pageSizeOptions]=\"defaultPageSizeOptions\"\n    showFirstLastButtons\n  ></mat-paginator>\n\n  <app-form-buttons-bar\n    *ngIf=\"canEdit && !mobile\"\n    (onCancel)=\"load()\"\n    (onSave)=\"save()\"\n    [disabled]=\"(loadingSubject | async) || !dirty\"\n  >\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\" *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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.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$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i2$1.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$1.IonContent, selector: "ion-content", inputs: ["color", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i2$1.IonFab, selector: "ion-fab", inputs: ["activated", "edge", "horizontal", "vertical"] }, { kind: "component", type: i2$1.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$1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i2$1.IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: i2$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i2$1.IonInfiniteScroll, selector: "ion-infinite-scroll", inputs: ["disabled", "position", "threshold"] }, { kind: "component", type: i2$1.IonInfiniteScrollContent, selector: "ion-infinite-scroll-content", inputs: ["loadingSpinner", "loadingText"] }, { kind: "component", type: i2$1.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$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: i2$1.IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: i2$1.IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: i2$1.IonRow, selector: "ion-row" }, { kind: "component", type: i2$1.IonSkeletonText, selector: "ion-skeleton-text", inputs: ["animated"] }, { kind: "component", type: i2$1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i2$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "directive", type: i1$1.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { kind: "directive", type: i1$3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$3.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$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i6$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i1$7.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$7.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$7.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$7.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$7.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$7.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$7.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$7.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$7.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$7.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i8$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i8$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i9$3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.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: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i13$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "directive", type: i13$2.MatExpansionPanelActionRow, selector: "mat-action-row" }, { kind: "component", type: i6$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i11$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "directive", type: i9.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "directive", type: i1$5.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: MatAutocompleteField, selector: "mat-autocomplete-field", inputs: ["equals", "logPrefix", "formControl", "formControlName", "floatLabel", "label", "appearance", "subscriptSizing", "placeholder", "suggestFn", "required", "hideRequiredMarker", "mobile", "clearable", "debounceTime", "displaySeparator", "displayWith", "displayAttributes", "displayColumnSizes", "displayColumnNames", "highlightAccent", "showAllOnFocus", "showPanelOnFocus", "reloadItemsOnFocus", "clearInvalidValueOnBlur", "autofocus", "config", "i18nPrefix", "noResultMessage", "panelClass", "panelWidth", "disableRipple", "matAutocompletePosition", "multiple", "fetchMoreThreshold", "suggestLengthThreshold", "showLoadingSpinner", "debug", "showSearchBar", "stickySearchBar", "applyImplicitValue", "dropButtonTitle", "clearButtonTitle", "trimSearchText", "splitSearchText", "selectInputContentOnFocus", "selectInputContentOnFocusDelay", "previewImplicitValue", "showFavorites", "toggleFavoriteTitle", "favoriteItems", "colSizes", "class", "filter", "readonly", "tabindex", "items"], outputs: ["click", "blur", "focus", "dropButtonClick", "keydown.escape", "keydown.backspace", "keyup.enter", "selectionChange", "openedChange", "toggleFavorite"] }, { kind: "component", type: MatBooleanField, selector: "mat-boolean-field", inputs: ["disabled", "formControl", "formControlName", "placeholder", "floatLabel", "appearance", "subscriptSizing", "readonly", "required", "compact", "autofocus", "style", "buttonsColCount", "class", "yesLabel", "noLabel", "showButtonIcons", "yesIcon", "noIcon", "clearable", "labelPosition", "tabindex", "showRadio", "value"], outputs: ["keyup.enter", "focus", "blur"] }, { kind: "directive", type: AutofocusDirective, selector: "[autofocus], input[appAutofocus]", inputs: ["appAutofocus", "autofocusDelay"] }, { kind: "directive", type: AutoTitleDirective, selector: "ion-label[appAutoTitle], mat-label[appAutoTitle]", inputs: ["appAutoTitle"] }, { kind: "component", type: ToolbarComponent, selector: "app-toolbar", inputs: ["progressBarMode", "title", "color", "class", "id", "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", "disabledEscape", "classList", "saveButtonColor", "backText", "cancelText", "nextText", "showBack", "showCancel", "showNext", "showSave"], outputs: ["onCancel", "onSave", "onNext", "onBack", "onSaveAndClose", "onSaveAndNext"] }, { kind: "component", type: ActionsColumnComponent, selector: "app-actions-column", inputs: ["matColumnDef", "style", "showPendingSpinner", "stickyEnd", "canCancel", "canConfirm", "canDelete", "canBackward", "canForward", "canConfirmAndAdd", "dirtyIcon", "optionsTitle", "class", "cellTemplateStart", "cellTemplate"], outputs: ["optionsClick", "cancelOrDeleteClick", "confirmEditCreateClick", "confirmAndAddClick", "backward", "forward"] }, { kind: "directive", type: i1$3.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$1.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: FormGetControlPipe, name: "formGetControl" }, { kind: "pipe", type: FormGetValuePipe, name: "formGetValue" }, { kind: "pipe", type: IsSelectedPipe, name: "isSelected" }, { kind: "pipe", type: IsEmptySelectionPipe, name: "isEmptySelection" }, { kind: "pipe", type: IsMultipleSelectionPipe, name: "isMultipleSelection" }, { kind: "pipe", type: IsAllSelectedPipe, name: "isAllSelected" }, { kind: "pipe", type: IsNotAllSelectedPipe, name: "isNotAllSelected" }, { kind: "pipe", type: ReferentialToStringPipe, name: "referentialToString" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Table2TestPage, decorators: [{
             type: Component,