@dsivd/prestations-ng 15.2.1 → 15.2.3-beta2

package/fesm2020/dsivd-prestations-ng.mjs

@@ -587,6 +587,7 @@ class GesdemHandlerService {
         url = `${url}/validated/${reference}`;
         return this.http.get(url).pipe(tap(this.emitResponse.bind(this)), map(() => true), catchError((response) => this.handleGesdemError(reference, response)));
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     retrieveActionStatut(reference) {
         let url = 'api';
         if (this.prefix) {
@@ -1459,6 +1460,7 @@ const DEFAULT_DICTIONARY = {
     'foehn-table.totalElements': '{total} éléments trouvés',
     'foehn-table.totalElements.1': '1 élément trouvé',
     'foehn-table.totalElements.0': 'Aucun résultat',
+    'foehn-table.header.actions': 'Actions',
     'foehn-status-progress-bar.step1': 'Saisie',
     'foehn-status-progress-bar.step1.srOnly': 'Etape 1 sur 3, Saisie',
     'foehn-status-progress-bar.step2': 'Vérification',
@@ -4149,7 +4151,12 @@ class FoehnCheckableGroupComponent extends FoehnInputComponent {
         // This allows us to properly use an object as the model rather
         // than a string.
         const identityFn = this.getValueIdentityFunction();
-        return identityFn(value1) === identityFn(value2);
+        if (identityFn) {
+            return identityFn(value1) === identityFn(value2);
+        }
+        else {
+            return ObjectHelper.isEqual(value1, value2);
+        }
     }
     onElementsRetrieved() {
         if (!this.model && this.defaultElementValue) {
@@ -4216,7 +4223,7 @@ class FoehnCheckableGroupComponent extends FoehnInputComponent {
     getValueIdentityFunction() {
         return typeof this.elementValueIdentity === 'function'
             ? this.elementValueIdentity
-            : (x) => x;
+            : null;
     }
     fetchData() {
         return this.httpClient.get(this.elementsUrl).pipe(map(r => {
@@ -4292,19 +4299,7 @@ class FoehnSelectComponent extends FoehnCheckableGroupComponent {
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     compareFn(value1, value2) {
-        return ObjectHelper.isEqual(value1, value2);
-    }
-    /**
-     * We override areValuesEquals from FoehnCheckableGroupComponent so we keep only one way of comparing objects
-     * So there is no need to use 'elementValueIdentity' anymore
-     *
-     * @param value1 to be compared to
-     * @param value2 to be compared to
-     * @returns boolean
-     */
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    areValuesEquals(value1, value2) {
-        return ObjectHelper.isEqual(value1, value2);
+        return this.areValuesEquals(value1, value2);
     }
 }
 FoehnSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FoehnSelectComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
@@ -4314,7 +4309,7 @@ FoehnSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => FoehnSelectComponent),
             multi: true
         }
-    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <select\n        *ngIf=\"!multiple\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option *ngIf=\"!required\" [ngValue]=\"null\">-</option>\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n            [innerHTML]=\"getLabel(element)\"\n        ></option>\n    </select>\n    <select\n        *ngIf=\"multiple\"\n        multiple\n        [attr.aria-multiselectable]=\"true\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.aria-selected]=\"isElementSelected(element)\"\n        >\n            {{ getLabel(element) }}\n        </option>\n    </select>\n</div>\n", components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <select\n        *ngIf=\"!multiple\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option *ngIf=\"!required\" [ngValue]=\"null\">-</option>\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n            [innerHTML]=\"getLabel(element)\"\n        ></option>\n    </select>\n    <select\n        *ngIf=\"multiple\"\n        multiple\n        [attr.aria-multiselectable]=\"true\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.aria-selected]=\"isElementSelected(element)\"\n        >\n            {{ getLabel(element) }}\n        </option>\n    </select>\n</div>\n", components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FoehnSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'foehn-select', providers: [
@@ -4323,7 +4318,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImpor
                             useExisting: forwardRef(() => FoehnSelectComponent),
                             multi: true
                         }
-                    ], template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <select\n        *ngIf=\"!multiple\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option *ngIf=\"!required\" [ngValue]=\"null\">-</option>\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n            [innerHTML]=\"getLabel(element)\"\n        ></option>\n    </select>\n    <select\n        *ngIf=\"multiple\"\n        multiple\n        [attr.aria-multiselectable]=\"true\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.aria-selected]=\"isElementSelected(element)\"\n        >\n            {{ getLabel(element) }}\n        </option>\n    </select>\n</div>\n" }]
+                    ], template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrorsToDisplay()\"\n    [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    <label\n        [attr.for]=\"buildChildId()\"\n        *ngIf=\"!!label\"\n        [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\n    >\n        <span [innerHTML]=\"label\"></span>\n        <span\n            *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n            aria-hidden=\"true\"\n        >\n            {{ 'foehn-input.optional' | fromDictionary }}\n        </span>\n    </label>\n\n    <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n    <div *ngIf=\"!elements\">Chargement...</div>\n\n    <small\n        *ngIf=\"helpText\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText\"\n    ></small>\n\n    <ng-content></ng-content>\n\n    <select\n        *ngIf=\"!multiple\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [attr.autocomplete]=\"getAutoComplete()\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option *ngIf=\"!required\" [ngValue]=\"null\">-</option>\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n            [innerHTML]=\"getLabel(element)\"\n        ></option>\n    </select>\n    <select\n        *ngIf=\"multiple\"\n        multiple\n        [attr.aria-multiselectable]=\"true\"\n        [class.is-invalid]=\"hasErrorsToDisplay() || hasInheritErrorFromParent()\"\n        class=\"form-control\"\n        [name]=\"name || label\"\n        [attr.id]=\"buildChildId()\"\n        [attr.disabled]=\"disabled ? 'disabled' : null\"\n        [attr.aria-describedby]=\"getDescribedBy()\"\n        [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n        [attr.aria-required]=\"required || null\"\n        [ngModel]=\"model\"\n        (ngModelChange)=\"updateNgModel($event)\"\n        [compareWith]=\"compareFn.bind(this)\"\n        (change)=\"handleChange(model)\"\n        #entryComponent\n        ngDefaultControl\n    >\n        <option\n            *ngFor=\"let element of elements\"\n            [ngValue]=\"getValue(element)\"\n            [attr.selected]=\"isElementSelected(element) ? 'selected' : null\"\n            [attr.aria-selected]=\"isElementSelected(element)\"\n        >\n            {{ getLabel(element) }}\n        </option>\n    </select>\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { multiple: [{
                 type: Input
             }] } });
@@ -9856,10 +9851,10 @@ class FoehnTableComponent {
     }
 }
 FoehnTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FoehnTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FoehnTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: FoehnTableComponent, selector: "foehn-table", inputs: { itemsPerPage: "itemsPerPage", id: "id", previousLabel: "previousLabel", nextLabel: "nextLabel", totalElements: "totalElements", fixedPageCount: "fixedPageCount", columnsConfiguration: "columnsConfiguration", sort: "sort", list: "list", trackByFn: "trackByFn" }, outputs: { pageChange: "pageChange", sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" [id]=\"id\">\n    <div class=\"col-12\">\n        <h4 *ngIf=\"!!totalElements && totalElements === 1\">\n            {{ 'foehn-table.totalElements.1' | fromDictionary }}\n        </h4>\n        <h4 *ngIf=\"!!totalElements && totalElements !== 1\">\n            {{\n                'foehn-table.totalElements'\n                    | fromDictionary: { total: totalElements.toString() }\n            }}\n        </h4>\n    </div>\n\n    <div class=\"col-12 table-responsive\">\n        <table class=\"table table-hover\">\n            <thead class=\"vd-bg-pattern-bars-gray\">\n                <tr>\n                    <th\n                        scope=\"col\"\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id\"\n                    >\n                        <ng-container\n                            *ngIf=\"!filteredList.length || !col.sortAttribute\"\n                        >\n                            <span\n                                [innerHTML]=\"\n                                    col.columnLabelKey | fromDictionary\n                                \"\n                            ></span>\n                        </ng-container>\n\n                        <ng-container\n                            *ngIf=\"!!filteredList.length && !!col.sortAttribute\"\n                        >\n                            <a\n                                href=\"#\"\n                                class=\"vd-text-thin\"\n                                (click)=\"\n                                    $event.preventDefault();\n                                    triggerSort(col.sortAttribute)\n                                \"\n                                [title]=\"\n                                    'Trier par ' +\n                                    (col.columnLabelKey | fromDictionary)\n                                \"\n                            >\n                                <span\n                                    [innerHTML]=\"\n                                        col.columnLabelKey | fromDictionary\n                                    \"\n                                ></span>\n                                <ng-container\n                                    *ngIf=\"\n                                        sort.sortAttribute === col.sortAttribute\n                                    \"\n                                >\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'ASC'\"\n                                    >\n                                        <foehn-icon-chevron-up></foehn-icon-chevron-up>\n                                    </span>\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'DESC'\"\n                                    >\n                                        <foehn-icon-chevron-down></foehn-icon-chevron-down>\n                                    </span>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                    </th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr\n                    *ngFor=\"\n                        let item of filteredList;\n                        let index = index;\n                        trackBy: trackByFn\n                    \"\n                >\n                    <td\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id + '-' + index\"\n                    >\n                        <ng-container *ngIf=\"!!col.isImportant\">\n                            <span\n                                *ngIf=\"col.isImportant(item)\"\n                                class=\"cell-vertical-align-middle\"\n                            >\n                                <svg\n                                    xmlns=\"http://www.w3.org/2000/svg\"\n                                    width=\"30\"\n                                    height=\"30\"\n                                    style=\"color: var(--red)\"\n                                    fill=\"currentColor\"\n                                    class=\"bi bi-exclamation\"\n                                    viewBox=\"0 0 16 16\"\n                                >\n                                    <path\n                                        d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z\"\n                                    />\n                                </svg>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!col.routerLinkGetter\">\n                            <span\n                                [innerHTML]=\"col.valueGetter(item)\"\n                                class=\"cell-vertical-align-middle\"\n                            ></span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.routerLinkGetter\">\n                            <a\n                                [routerLink]=\"col.routerLinkGetter(item)\"\n                                queryParamsHandling=\"merge\"\n                                class=\"cell-vertical-align-middle\"\n                            >\n                                <span\n                                    [innerHTML]=\"col.valueGetter(item)\"\n                                ></span>\n                            </a>\n                        </ng-container>\n                    </td>\n                </tr>\n                <tr *ngIf=\"!!columnsConfiguration && !filteredList.length\">\n                    <td [colSpan]=\"columnsConfiguration.length\">\n                        <div class=\"w-100 text-center\">\n                            {{ 'foehn-table.totalElements.0' | fromDictionary }}\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n\n        <div class=\"row d-flex justify-content-between p-1\">\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasPreviousPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--previous\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"previousPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    <foehn-icon-chevron-left></foehn-icon-chevron-left>\n                                    {{ previousLabel }}\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage - 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasNextPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--next\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"nextPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    {{ nextLabel }}\n                                    <foehn-icon-chevron-right></foehn-icon-chevron-right>\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage + 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;-webkit-text-decoration-line:none;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}.cell-vertical-align-middle{vertical-align:middle}\n"], components: [{ type: FoehnIconChevronUpComponent, selector: "foehn-icon-chevron-up" }, { type: FoehnIconChevronDownComponent, selector: "foehn-icon-chevron-down" }, { type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+FoehnTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.5", type: FoehnTableComponent, selector: "foehn-table", inputs: { itemsPerPage: "itemsPerPage", id: "id", previousLabel: "previousLabel", nextLabel: "nextLabel", totalElements: "totalElements", fixedPageCount: "fixedPageCount", columnsConfiguration: "columnsConfiguration", sort: "sort", list: "list", trackByFn: "trackByFn" }, outputs: { pageChange: "pageChange", sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" [id]=\"id\">\n    <div class=\"col-12\">\n        <h4 *ngIf=\"!!totalElements && totalElements === 1\">\n            {{ 'foehn-table.totalElements.1' | fromDictionary }}\n        </h4>\n        <h4 *ngIf=\"!!totalElements && totalElements !== 1\">\n            {{\n                'foehn-table.totalElements'\n                    | fromDictionary: { total: totalElements.toString() }\n            }}\n        </h4>\n    </div>\n\n    <div class=\"col-12 table-responsive\">\n        <table class=\"table table-hover\">\n            <thead class=\"vd-bg-pattern-bars-gray\">\n                <tr>\n                    <th\n                        scope=\"col\"\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id\"\n                    >\n                        <ng-container\n                            *ngIf=\"!filteredList.length || !col.sortAttribute\"\n                        >\n                            <span\n                                [innerHTML]=\"\n                                    col.columnLabelKey | fromDictionary\n                                \"\n                            ></span>\n                        </ng-container>\n\n                        <ng-container\n                            *ngIf=\"!!filteredList.length && !!col.sortAttribute\"\n                        >\n                            <a\n                                href=\"#\"\n                                class=\"vd-text-thin\"\n                                (click)=\"\n                                    $event.preventDefault();\n                                    triggerSort(col.sortAttribute)\n                                \"\n                                [title]=\"\n                                    'Trier par ' +\n                                    (col.columnLabelKey | fromDictionary)\n                                \"\n                            >\n                                <span\n                                    [innerHTML]=\"\n                                        col.columnLabelKey | fromDictionary\n                                    \"\n                                ></span>\n                                <ng-container\n                                    *ngIf=\"\n                                        sort.sortAttribute === col.sortAttribute\n                                    \"\n                                >\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'ASC'\"\n                                    >\n                                        <foehn-icon-chevron-up></foehn-icon-chevron-up>\n                                    </span>\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'DESC'\"\n                                    >\n                                        <foehn-icon-chevron-down></foehn-icon-chevron-down>\n                                    </span>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                    </th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr\n                    *ngFor=\"\n                        let item of filteredList;\n                        let index = index;\n                        trackBy: trackByFn\n                    \"\n                >\n                    <td\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id + '-' + index\"\n                    >\n                        <ng-container *ngIf=\"!!col.isImportant\">\n                            <span\n                                *ngIf=\"col.isImportant(item)\"\n                                class=\"cell-vertical-align-middle\"\n                            >\n                                <svg\n                                    xmlns=\"http://www.w3.org/2000/svg\"\n                                    width=\"30\"\n                                    height=\"30\"\n                                    style=\"color: var(--red)\"\n                                    fill=\"currentColor\"\n                                    class=\"bi bi-exclamation\"\n                                    viewBox=\"0 0 16 16\"\n                                >\n                                    <path\n                                        d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z\"\n                                    />\n                                </svg>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.iconGetter\">\n                            <span\n                                *ngIf=\"col.iconGetter(item) as iconDef\"\n                                class=\"cell-vertical-align-middle mr-2\"\n                            >\n                                <fa-icon\n                                    aria-hidden=\"true\"\n                                    [icon]=\"iconDef.icon\"\n                                    [title]=\"iconDef.label\"\n                                ></fa-icon>\n                                <span class=\"sr-only\">{{ iconDef.label }}</span>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.template\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"col.template\"\n                                [ngTemplateOutletContext]=\"{\n                                    item: item,\n                                    index: index\n                                }\"\n                            ></ng-template>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!col.template\">\n                            <ng-container *ngIf=\"!col.routerLinkGetter\">\n                                <span\n                                    [innerHTML]=\"col.valueGetter(item)\"\n                                    class=\"cell-vertical-align-middle\"\n                                ></span>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"!!col.routerLinkGetter\">\n                                <a\n                                    [routerLink]=\"col.routerLinkGetter(item)\"\n                                    queryParamsHandling=\"merge\"\n                                    class=\"cell-vertical-align-middle\"\n                                >\n                                    <span\n                                        [innerHTML]=\"col.valueGetter(item)\"\n                                    ></span>\n                                </a>\n                            </ng-container>\n                        </ng-container>\n                    </td>\n                </tr>\n                <tr *ngIf=\"!!columnsConfiguration && !filteredList.length\">\n                    <td [colSpan]=\"columnsConfiguration.length\">\n                        <div class=\"w-100 text-center\">\n                            {{ 'foehn-table.totalElements.0' | fromDictionary }}\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n\n        <div class=\"row d-flex justify-content-between p-1\">\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasPreviousPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--previous\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"previousPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    <foehn-icon-chevron-left></foehn-icon-chevron-left>\n                                    {{ previousLabel }}\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage - 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasNextPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--next\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"nextPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    {{ nextLabel }}\n                                    <foehn-icon-chevron-right></foehn-icon-chevron-right>\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage + 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;-webkit-text-decoration-line:none;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}.cell-vertical-align-middle{vertical-align:middle}\n"], components: [{ type: FoehnIconChevronUpComponent, selector: "foehn-icon-chevron-up" }, { type: FoehnIconChevronDownComponent, selector: "foehn-icon-chevron-down" }, { type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.5", ngImport: i0, type: FoehnTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'foehn-table', template: "<div class=\"row\" [id]=\"id\">\n    <div class=\"col-12\">\n        <h4 *ngIf=\"!!totalElements && totalElements === 1\">\n            {{ 'foehn-table.totalElements.1' | fromDictionary }}\n        </h4>\n        <h4 *ngIf=\"!!totalElements && totalElements !== 1\">\n            {{\n                'foehn-table.totalElements'\n                    | fromDictionary: { total: totalElements.toString() }\n            }}\n        </h4>\n    </div>\n\n    <div class=\"col-12 table-responsive\">\n        <table class=\"table table-hover\">\n            <thead class=\"vd-bg-pattern-bars-gray\">\n                <tr>\n                    <th\n                        scope=\"col\"\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id\"\n                    >\n                        <ng-container\n                            *ngIf=\"!filteredList.length || !col.sortAttribute\"\n                        >\n                            <span\n                                [innerHTML]=\"\n                                    col.columnLabelKey | fromDictionary\n                                \"\n                            ></span>\n                        </ng-container>\n\n                        <ng-container\n                            *ngIf=\"!!filteredList.length && !!col.sortAttribute\"\n                        >\n                            <a\n                                href=\"#\"\n                                class=\"vd-text-thin\"\n                                (click)=\"\n                                    $event.preventDefault();\n                                    triggerSort(col.sortAttribute)\n                                \"\n                                [title]=\"\n                                    'Trier par ' +\n                                    (col.columnLabelKey | fromDictionary)\n                                \"\n                            >\n                                <span\n                                    [innerHTML]=\"\n                                        col.columnLabelKey | fromDictionary\n                                    \"\n                                ></span>\n                                <ng-container\n                                    *ngIf=\"\n                                        sort.sortAttribute === col.sortAttribute\n                                    \"\n                                >\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'ASC'\"\n                                    >\n                                        <foehn-icon-chevron-up></foehn-icon-chevron-up>\n                                    </span>\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'DESC'\"\n                                    >\n                                        <foehn-icon-chevron-down></foehn-icon-chevron-down>\n                                    </span>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                    </th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr\n                    *ngFor=\"\n                        let item of filteredList;\n                        let index = index;\n                        trackBy: trackByFn\n                    \"\n                >\n                    <td\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id + '-' + index\"\n                    >\n                        <ng-container *ngIf=\"!!col.isImportant\">\n                            <span\n                                *ngIf=\"col.isImportant(item)\"\n                                class=\"cell-vertical-align-middle\"\n                            >\n                                <svg\n                                    xmlns=\"http://www.w3.org/2000/svg\"\n                                    width=\"30\"\n                                    height=\"30\"\n                                    style=\"color: var(--red)\"\n                                    fill=\"currentColor\"\n                                    class=\"bi bi-exclamation\"\n                                    viewBox=\"0 0 16 16\"\n                                >\n                                    <path\n                                        d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z\"\n                                    />\n                                </svg>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!col.routerLinkGetter\">\n                            <span\n                                [innerHTML]=\"col.valueGetter(item)\"\n                                class=\"cell-vertical-align-middle\"\n                            ></span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.routerLinkGetter\">\n                            <a\n                                [routerLink]=\"col.routerLinkGetter(item)\"\n                                queryParamsHandling=\"merge\"\n                                class=\"cell-vertical-align-middle\"\n                            >\n                                <span\n                                    [innerHTML]=\"col.valueGetter(item)\"\n                                ></span>\n                            </a>\n                        </ng-container>\n                    </td>\n                </tr>\n                <tr *ngIf=\"!!columnsConfiguration && !filteredList.length\">\n                    <td [colSpan]=\"columnsConfiguration.length\">\n                        <div class=\"w-100 text-center\">\n                            {{ 'foehn-table.totalElements.0' | fromDictionary }}\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n\n        <div class=\"row d-flex justify-content-between p-1\">\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasPreviousPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--previous\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"previousPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    <foehn-icon-chevron-left></foehn-icon-chevron-left>\n                                    {{ previousLabel }}\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage - 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasNextPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--next\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"nextPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    {{ nextLabel }}\n                                    <foehn-icon-chevron-right></foehn-icon-chevron-right>\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage + 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;-webkit-text-decoration-line:none;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}.cell-vertical-align-middle{vertical-align:middle}\n"] }]
+            args: [{ selector: 'foehn-table', template: "<div class=\"row\" [id]=\"id\">\n    <div class=\"col-12\">\n        <h4 *ngIf=\"!!totalElements && totalElements === 1\">\n            {{ 'foehn-table.totalElements.1' | fromDictionary }}\n        </h4>\n        <h4 *ngIf=\"!!totalElements && totalElements !== 1\">\n            {{\n                'foehn-table.totalElements'\n                    | fromDictionary: { total: totalElements.toString() }\n            }}\n        </h4>\n    </div>\n\n    <div class=\"col-12 table-responsive\">\n        <table class=\"table table-hover\">\n            <thead class=\"vd-bg-pattern-bars-gray\">\n                <tr>\n                    <th\n                        scope=\"col\"\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id\"\n                    >\n                        <ng-container\n                            *ngIf=\"!filteredList.length || !col.sortAttribute\"\n                        >\n                            <span\n                                [innerHTML]=\"\n                                    col.columnLabelKey | fromDictionary\n                                \"\n                            ></span>\n                        </ng-container>\n\n                        <ng-container\n                            *ngIf=\"!!filteredList.length && !!col.sortAttribute\"\n                        >\n                            <a\n                                href=\"#\"\n                                class=\"vd-text-thin\"\n                                (click)=\"\n                                    $event.preventDefault();\n                                    triggerSort(col.sortAttribute)\n                                \"\n                                [title]=\"\n                                    'Trier par ' +\n                                    (col.columnLabelKey | fromDictionary)\n                                \"\n                            >\n                                <span\n                                    [innerHTML]=\"\n                                        col.columnLabelKey | fromDictionary\n                                    \"\n                                ></span>\n                                <ng-container\n                                    *ngIf=\"\n                                        sort.sortAttribute === col.sortAttribute\n                                    \"\n                                >\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'ASC'\"\n                                    >\n                                        <foehn-icon-chevron-up></foehn-icon-chevron-up>\n                                    </span>\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'DESC'\"\n                                    >\n                                        <foehn-icon-chevron-down></foehn-icon-chevron-down>\n                                    </span>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                    </th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr\n                    *ngFor=\"\n                        let item of filteredList;\n                        let index = index;\n                        trackBy: trackByFn\n                    \"\n                >\n                    <td\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id + '-' + index\"\n                    >\n                        <ng-container *ngIf=\"!!col.isImportant\">\n                            <span\n                                *ngIf=\"col.isImportant(item)\"\n                                class=\"cell-vertical-align-middle\"\n                            >\n                                <svg\n                                    xmlns=\"http://www.w3.org/2000/svg\"\n                                    width=\"30\"\n                                    height=\"30\"\n                                    style=\"color: var(--red)\"\n                                    fill=\"currentColor\"\n                                    class=\"bi bi-exclamation\"\n                                    viewBox=\"0 0 16 16\"\n                                >\n                                    <path\n                                        d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z\"\n                                    />\n                                </svg>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.iconGetter\">\n                            <span\n                                *ngIf=\"col.iconGetter(item) as iconDef\"\n                                class=\"cell-vertical-align-middle mr-2\"\n                            >\n                                <fa-icon\n                                    aria-hidden=\"true\"\n                                    [icon]=\"iconDef.icon\"\n                                    [title]=\"iconDef.label\"\n                                ></fa-icon>\n                                <span class=\"sr-only\">{{ iconDef.label }}</span>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.template\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"col.template\"\n                                [ngTemplateOutletContext]=\"{\n                                    item: item,\n                                    index: index\n                                }\"\n                            ></ng-template>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!col.template\">\n                            <ng-container *ngIf=\"!col.routerLinkGetter\">\n                                <span\n                                    [innerHTML]=\"col.valueGetter(item)\"\n                                    class=\"cell-vertical-align-middle\"\n                                ></span>\n                            </ng-container>\n\n                            <ng-container *ngIf=\"!!col.routerLinkGetter\">\n                                <a\n                                    [routerLink]=\"col.routerLinkGetter(item)\"\n                                    queryParamsHandling=\"merge\"\n                                    class=\"cell-vertical-align-middle\"\n                                >\n                                    <span\n                                        [innerHTML]=\"col.valueGetter(item)\"\n                                    ></span>\n                                </a>\n                            </ng-container>\n                        </ng-container>\n                    </td>\n                </tr>\n                <tr *ngIf=\"!!columnsConfiguration && !filteredList.length\">\n                    <td [colSpan]=\"columnsConfiguration.length\">\n                        <div class=\"w-100 text-center\">\n                            {{ 'foehn-table.totalElements.0' | fromDictionary }}\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n\n        <div class=\"row d-flex justify-content-between p-1\">\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasPreviousPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--previous\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"previousPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    <foehn-icon-chevron-left></foehn-icon-chevron-left>\n                                    {{ previousLabel }}\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage - 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasNextPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--next\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"nextPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    {{ nextLabel }}\n                                    <foehn-icon-chevron-right></foehn-icon-chevron-right>\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage + 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;-webkit-text-decoration-line:none;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}.cell-vertical-align-middle{vertical-align:middle}\n"] }]
         }], propDecorators: { itemsPerPage: [{
                 type: Input
             }], id: [{