@dsivd/prestations-ng 19.0.5 → 19.0.6-beta.2

package/ANGULAR_SIGNALS.md

@@ -47,11 +47,16 @@ increment(): void {
 }
 ```
 
-| Method        | Description                       |
-| ------------- | --------------------------------- |
-| `.set(value)` | Replace the value                 |
-| `.update(fn)` | Derive next value from current    |
-| `.mutate(fn)` | Mutate in place (arrays, objects) |
+| Method        | Description                    |
+| ------------- | ------------------------------ |
+| `.set(value)` | Replace the value              |
+| `.update(fn)` | Derive next value from current |
+
+> ⚠️ `.mutate()` is **not** part of the public API. It was part of the
+> original signals proposal but was removed from `WritableSignal` before
+> the stable release — mutating an object without a `.set()`/`.update()`
+> call is invisible to the signal graph. Always produce a new reference
+> via `.update()` (see [pitfall #8](angular-signals#common_pitfalls)).
 
 ---
 
@@ -302,8 +307,10 @@ readonly selectedOption = linkedSignal<string[], string>({
 });
 ```
 
-`previous` contains `{ value: T }` — the last value of the linked signal
-before the source changed, or `undefined` on first run.
+`previous` contains `{ source: S; value: D }` — the previous value of the
+`source` signal **and** the previous value of the linked signal itself, or
+`undefined` on first run. Explicit generic type arguments (`<S, D>`) are
+required as soon as you use `previous`.
 
 ---
 
@@ -393,12 +400,15 @@ Usage in a parent template:
 <!-- two-way -->
 <my-component [(isVisible)]="open" />
 
-<!-- one-way — will cause a compiler error with model() -->
+<!-- one-way binding — compiles fine, but changes made by the -->
+<!-- component are not propagated back to `open` -->
 <my-component [isVisible]="open" />
 ```
 
-> ⚠️ `model()` does not accept one-way `[binding]` alone.
-> Use `input()` if the child never needs to write back to the parent.
+> ⚠️ A one-way `[binding]` on a `model()` input is valid and compiles —
+> it's up to the consumer to decide whether they use the input, the
+> output, or both. It's just pointless if the component never needs to
+> write back: use `input()` instead to communicate intent clearly.
 
 > ⚠️ `model()` holds object values by reference. Mutating a nested property
 > of a `model()`'s value (e.g. `this.address().locality.name = 'x'`) does
@@ -828,15 +838,24 @@ effect(() => {
 });
 ```
 
-### 8. Mutating a `model()`'s nested object instead of reassigning
+### 8. Mutating a signal's value instead of reassigning
 
 This is the signals-era version of "mutating `@Input()` used to work."
 Pre-signals, Zone.js-driven change detection re-read template expressions
-on virtually every async event, so mutating a nested property and letting
-CD "catch it eventually" appeared to work. Signals only propagate on
-`.set()`/`.update()` — mutating `this.address().locality.name = 'x'` is
-invisible to the signal, the template, and any `effect()`/`computed()`
-depending on it.
+on virtually every async event, so mutating a nested property or an array
+in place and letting CD "catch it eventually" appeared to work. Signals
+only notify subscribers on `.set()`/`.update()` — any in-place mutation of
+the value returned by `signal()`/`model()`/`input()` is invisible to the
+signal, the template, and any `effect()`/`computed()` depending on it,
+because the object/array reference never changes and signals compare by
+reference by default.
+
+The fix is always the same shape: read the current value, produce a
+**new top-level reference** with the change applied, and pass that to
+`.set()` or `.update()`. Never call a mutating method or assign a nested
+property directly on `signalOrModel()`.
+
+#### 8a. Nested object property
 
 ```ts
 // 🔴 Silent no-op from the signal's perspective
@@ -848,3 +867,142 @@ this.address.update((current) => ({
     locality: { ...current.locality, name: 'newName' },
 }));
 ```
+
+#### 8b. Two-way binding directly on an array element inside `@for`
+
+Binding `[(model)]` straight to an indexed read of a signal
+(`model()[i]`) is a variant of the same mistake: the "write" side of the
+banana-in-a-box syntax tries to assign into `model()[i]`, which mutates
+the array in place instead of going through `.set()`/`.update()`, so
+nothing propagates and Angular may also warn about an unsupported
+two-way expression.
+
+```html
+<!-- 🔴 Tries to write through model()[i] — mutates in place, breaks reactivity -->
+@for (item of model(); track item.id; let i = $index) {
+<app-address-row [(model)]="model()[i]" />
+}
+
+<!-- 🟢 One-way in, explicit handler out -->
+@for (item of model(); track item.id; let i = $index) {
+<app-address-row [model]="model()[i]" (modelChange)="updateItem(i, $event)" />
+}
+```
+
+```ts
+updateItem(index: number, newValue: NomAdresse): void {
+    this.model.update((current) =>
+        current.map((item, i) => (i === index ? newValue : item)),
+    );
+}
+```
+
+#### 8c. Array mutating methods (`push`, `splice`, `pop`, `shift`, `unshift`, `sort`, `reverse`)
+
+All of these mutate the array in place and return either the mutated
+array, the removed element(s), or nothing — never a new reference. Since
+they operate on `this.model()` (the _value_, not the signal), Angular has
+no way to know the array changed.
+
+```ts
+// 🔴 Adds an item, but the signal reference is untouched — no re-render
+this.model().push({ name: null, address: null });
+
+// 🟢 New array reference via spread
+this.model.update((current) => [...current, { name: null, address: null }]);
+```
+
+```ts
+// 🔴 Removes an item in place — invisible to the signal
+this.model().splice(index, 1);
+
+// 🟢 filter() naturally returns a new array
+this.model.update((current) => current.filter((_, i) => i !== index));
+```
+
+```ts
+// 🔴 Same problem with pop() / shift() / unshift()
+this.model().pop();
+this.model().shift();
+this.model().unshift(newItem);
+
+// 🟢 Equivalent immutable forms
+this.model.update((current) => current.slice(0, -1)); // pop
+this.model.update((current) => current.slice(1)); // shift
+this.model.update((current) => [newItem, ...current]); // unshift
+```
+
+```ts
+// 🔴 sort() / reverse() mutate AND return the same array reference —
+// even risky to combine with spread if you forget it: [...current].sort()
+// mutates the *new* array in place, which is fine, but sorting
+// `this.model()` directly still mutates the one held by the signal
+this.model().sort((a, b) => a.name.localeCompare(b.name));
+
+// 🟢 Copy first, then sort/reverse the copy
+this.model.update((current) =>
+    [...current].sort((a, b) => a.name.localeCompare(b.name)),
+);
+```
+
+#### 8d. Direct index assignment
+
+```ts
+// 🔴 Mutates the array element in place
+this.model()[index] = newValue;
+
+// 🟢 map() to swap out just that index
+this.model.update((current) =>
+    current.map((item, i) => (i === index ? newValue : item)),
+);
+```
+
+#### 8e. `Object.assign()` on the current value
+
+`Object.assign(target, ...)` mutates and returns `target`. Passing
+`this.model()` as the target mutates the value in place, even though the
+call "looks" like it's producing something.
+
+```ts
+// 🔴 target is this.model() itself — mutated in place
+Object.assign(this.model(), { name: 'newName' });
+
+// 🟢 target is a fresh object — this is what Object.assign() is for
+this.model.update((current) => Object.assign({}, current, { name: 'newName' }));
+// or, more idiomatically:
+this.model.update((current) => ({ ...current, name: 'newName' }));
+```
+
+#### 8f. `Map` / `Set` values
+
+`Map` and `Set` are reference types too, and their mutating methods
+(`.set()` on a `Map`, `.add()`/`.delete()` on a `Set`) don't return a new
+`Map`/`Set` — they mutate and return `this`, which is easy to miss since
+`Map.prototype.set` shares a name with `WritableSignal.set`.
+
+```ts
+// 🔴 This is Map.prototype.set, not the signal's — mutates the same Map instance
+this.cache().set(key, value);
+
+// 🟢 Build a new Map from the old one
+this.cache.update((current) => new Map(current).set(key, value));
+```
+
+```ts
+// 🔴 Set.prototype.delete mutates in place
+this.selectedIds().delete(id);
+
+// 🟢 Copy into a new Set, then mutate the copy
+this.selectedIds.update((current) => {
+    const next = new Set(current);
+    next.delete(id);
+    return next;
+});
+```
+
+> 💡 General rule of thumb: if a method's name suggests it changes
+> something "in place" and doesn't hand you back a brand-new
+> object/array/Map/Set, assume it mutates and wrap it in a copy first.
+> When unsure, check the return type — a genuinely immutable operation
+> (`map`, `filter`, `concat`, `slice`, spread) always returns a fresh
+> reference you can pass straight to `.set()`/`.update()`.

package/UPGRADING_V19.md

@@ -1144,6 +1144,9 @@ export default tseslint.config(
                     style: 'camelCase',
                 },
             ],
+            '@angular-eslint/no-uncalled-signals': ['error'],
+            '@angular-eslint/prefer-signal-model': ['error'],
+            '@angular-eslint/prefer-signals': ['error'],
 
             // ── @typescript-eslint ───────────────────────────────────────────
             '@typescript-eslint/explicit-function-return-type': [

package/eslint/rules/__tests__/no-direct-signal-mutation.test.mjs

@@ -42,6 +42,10 @@ describe('no-direct-signal-mutation', () => {
         'let x = value',
         'const obj = { prop: value }',
         'array[0] = value',
+        'pendingFilesByFormKey.get(formKey).files = []',
+        'this.pendingFilesByFormKey.get(formKey).url = baseUrl',
+        'const autocompleteComponent = viewChild("auto"); autocompleteComponent().inputElement().nativeElement.hidden = true',
+        'component.inputElement().nativeElement.value = ""',
 
         // Method chaining without assignment
         'model().update((v) => v).subscribe()',
@@ -72,10 +76,6 @@ describe('no-direct-signal-mutation', () => {
           code: "this.model().deeply.nested.property = value",
           errors: [{ messageId: 'directMutation' }],
         },
-        {
-          code: "obj.getter().property = value",
-          errors: [{ messageId: 'directMutation' }],
-        },
         {
           code: "model().property += value",
           errors: [{ messageId: 'directMutation' }],

package/eslint/rules/no-direct-signal-mutation.mjs

@@ -19,13 +19,23 @@ export default {
   },
 
   create(context) {
+    const sourceCode = context.sourceCode;
+    const viewQueryFactoryNames = new Set([
+      "viewChild",
+      "viewChildren",
+      "contentChild",
+      "contentChildren",
+    ]);
+    const viewQueryAccessorNames = collectViewQueryAccessorNames(sourceCode.ast);
+
     return {
       AssignmentExpression(node) {
-        // Check if left side is a member expression with a call expression
-        if (
-          node.left.type === "MemberExpression" &&
-          isCallExpression(node.left.object)
-        ) {
+        if (node.left.type !== "MemberExpression") {
+          return;
+        }
+
+        const rootCallExpression = getFirstCallExpression(node.left.object);
+        if (rootCallExpression && isSignalLikeRootCall(rootCallExpression)) {
           context.report({
             node,
             messageId: "directMutation",
@@ -34,19 +44,132 @@ export default {
       },
     };
 
+    function isSignalLikeRootCall(node) {
+      if (node.arguments.length !== 0) {
+        return false;
+      }
+
+      // model().prop = ... (local signal-like accessor)
+      if (node.callee.type === "Identifier") {
+        return !viewQueryAccessorNames.has(node.callee.name);
+      }
+
+      // this.model().prop = ... (component/service signal accessor)
+      // component.model().prop = ... should not be assumed to be a signal read.
+      if (node.callee.type === "MemberExpression") {
+        if (node.callee.object?.type !== "ThisExpression") {
+          return false;
+        }
+        return !isViewQueryAccessorCall(node.callee);
+      }
+
+      return false;
+    }
+
+    function isViewQueryAccessorCall(callee) {
+      const calledName = getCalledName(callee);
+      return calledName ? viewQueryAccessorNames.has(calledName) : false;
+    }
+
+    function getCalledName(callee) {
+      if (!callee) {
+        return null;
+      }
+      if (callee.type === "Identifier") {
+        return callee.name;
+      }
+      if (
+        callee.type === "MemberExpression" &&
+        !callee.computed &&
+        callee.property.type === "Identifier"
+      ) {
+        return callee.property.name;
+      }
+      return null;
+    }
+
     /**
-     * Recursively check if a node is a call expression.
-     * Handles: func().prop, obj.func().prop, this.func().prop, etc.
+     * Finds the first/root function call used as the base of a mutation chain.
+     * Examples:
+     * - model().property = x         => model()
+     * - this.model().deep.prop = x   => this.model()
+     * - this.query().el().x = y      => this.query()
      */
-    function isCallExpression(node) {
-      if (!node) return false;
-      if (node.type === "CallExpression") {
-        return true;
+    function getFirstCallExpression(node) {
+      if (!node) {
+        return null;
       }
       if (node.type === "MemberExpression") {
-        return isCallExpression(node.object);
+        return getFirstCallExpression(node.object);
+      }
+      if (node.type === "CallExpression") {
+        if (node.callee.type === "MemberExpression") {
+          const nestedCall = getFirstCallExpression(node.callee.object);
+          return nestedCall || node;
+        }
+        return node;
+      }
+      return null;
+    }
+
+    function collectViewQueryAccessorNames(ast) {
+      const names = new Set();
+
+      walkAst(ast, (node) => {
+        if (
+          node.type === "VariableDeclarator" &&
+          node.id?.type === "Identifier" &&
+          isViewQueryFactoryCall(node.init)
+        ) {
+          names.add(node.id.name);
+          return;
+        }
+
+        if (
+          (node.type === "PropertyDefinition" || node.type === "ClassProperty") &&
+          node.key?.type === "Identifier" &&
+          isViewQueryFactoryCall(node.value)
+        ) {
+          names.add(node.key.name);
+        }
+      });
+
+      return names;
+    }
+
+    function isViewQueryFactoryCall(node) {
+      return (
+        node?.type === "CallExpression" &&
+        node.callee?.type === "Identifier" &&
+        viewQueryFactoryNames.has(node.callee.name)
+      );
+    }
+
+    function walkAst(node, visitor, visited = new WeakSet()) {
+      if (!node || typeof node !== "object") {
+        return;
+      }
+      if (visited.has(node)) {
+        return;
+      }
+      visited.add(node);
+
+      visitor(node);
+
+      for (const key of Object.keys(node)) {
+        // ESLint AST nodes include cyclic parent references.
+        if (key === "parent") {
+          continue;
+        }
+        const child = node[key];
+        if (Array.isArray(child)) {
+          for (const element of child) {
+            walkAst(element, visitor, visited);
+          }
+        } else {
+          walkAst(child, visitor, visited);
+        }
       }
-      return false;
     }
   },
 };

package/fesm2022/dsivd-prestations-ng.mjs

@@ -771,6 +771,8 @@ class FoehnInputComponent {
         this.blurHandler = output({ alias: 'blur' });
         // eslint-disable-next-line @angular-eslint/no-output-native,@angular-eslint/no-output-rename
         this.focusHandler = output({ alias: 'focus' });
+        // not readonly, to be redefined in subcomponents
+        // eslint-disable-next-line @angular-eslint/prefer-signals
         this.displayClearButton = computed(() => this.clearButton() && !!this.model() && !this.disabled(), ...(ngDevMode ? [{ debugName: "displayClearButton" }] : /* istanbul ignore next */ []));
         this.validationHandlerService = inject(ValidationHandlerService);
         /**
@@ -6777,7 +6779,7 @@ class FoehnTableComponent extends FoehnInputComponent {
         this.columnsConfiguration = model(...(ngDevMode ? [undefined, { debugName: "columnsConfiguration" }] : /* istanbul ignore next */ []));
         this.itemsPerPage = input(10, ...(ngDevMode ? [{ debugName: "itemsPerPage" }] : /* istanbul ignore next */ []));
         this.fixedPageCount = input(...(ngDevMode ? [undefined, { debugName: "fixedPageCount" }] : /* istanbul ignore next */ []));
-        this.sort = input(...(ngDevMode ? [undefined, { debugName: "sort" }] : /* istanbul ignore next */ []));
+        this.sort = model(...(ngDevMode ? [undefined, { debugName: "sort" }] : /* istanbul ignore next */ []));
         this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
         this.totalElements = input(...(ngDevMode ? [undefined, { debugName: "totalElements" }] : /* istanbul ignore next */ []));
         this.titleSrOnly = input(...(ngDevMode ? [undefined, { debugName: "titleSrOnly" }] : /* istanbul ignore next */ []));
@@ -6785,7 +6787,6 @@ class FoehnTableComponent extends FoehnInputComponent {
         this.nextLabel = input('Suivant', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
         this.tableClass = input('', ...(ngDevMode ? [{ debugName: "tableClass" }] : /* istanbul ignore next */ []));
         this.trackByFn = input((index, _item) => index, ...(ngDevMode ? [{ debugName: "trackByFn" }] : /* istanbul ignore next */ []));
-        this.sortChange = output();
         this.pageChange = output();
         this.rowClick = output();
         this.currentPage = 1;
@@ -6863,7 +6864,7 @@ class FoehnTableComponent extends FoehnInputComponent {
             sortDirection =
                 this.sort().sortDirection === 'DESC' ? 'ASC' : 'DESC';
         }
-        this.sortChange.emit({
+        this.sort.set({
             sortDirection,
             sortAttribute,
         });
@@ -6891,7 +6892,7 @@ class FoehnTableComponent extends FoehnInputComponent {
         this.filteredList = this._list.slice(start, start + this.itemsPerPage());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.20", ngImport: i0, type: FoehnTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: FoehnTableComponent, isStandalone: true, selector: "foehn-table", inputs: { columnsConfiguration: { classPropertyName: "columnsConfiguration", publicName: "columnsConfiguration", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, fixedPageCount: { classPropertyName: "fixedPageCount", publicName: "fixedPageCount", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, totalElements: { classPropertyName: "totalElements", publicName: "totalElements", isSignal: true, isRequired: false, transformFunction: null }, titleSrOnly: { classPropertyName: "titleSrOnly", publicName: "titleSrOnly", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnsConfiguration: "columnsConfigurationChange", sortChange: "sortChange", pageChange: "pageChange", rowClick: "rowClick" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.20", type: FoehnTableComponent, isStandalone: true, selector: "foehn-table", inputs: { columnsConfiguration: { classPropertyName: "columnsConfiguration", publicName: "columnsConfiguration", isSignal: true, isRequired: false, transformFunction: null }, itemsPerPage: { classPropertyName: "itemsPerPage", publicName: "itemsPerPage", isSignal: true, isRequired: false, transformFunction: null }, fixedPageCount: { classPropertyName: "fixedPageCount", publicName: "fixedPageCount", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, totalElements: { classPropertyName: "totalElements", publicName: "totalElements", isSignal: true, isRequired: false, transformFunction: null }, titleSrOnly: { classPropertyName: "titleSrOnly", publicName: "titleSrOnly", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, tableClass: { classPropertyName: "tableClass", publicName: "tableClass", isSignal: true, isRequired: false, transformFunction: null }, trackByFn: { classPropertyName: "trackByFn", publicName: "trackByFn", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columnsConfiguration: "columnsConfigurationChange", sort: "sortChange", pageChange: "pageChange", rowClick: "rowClick" }, providers: [
             {
                 provide: FoehnInputComponent,
                 useExisting: forwardRef(() => FoehnTableComponent),
@@ -6916,7 +6917,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.20", ngImpo
                         FoehnIconChevronRightComponent,
                         SdkDictionaryPipe,
                     ], template: "<div\n    class=\"form-group\"\n    [class.has-danger]=\"hasErrors()\"\n    [class.vd-form-group-danger]=\"hasErrors()\"\n    [attr.id]=\"buildId('Container')\"\n    tabindex=\"-1\"\n>\n    @if (label() && type !== 'hidden') {\n        <p\n            [attr.id]=\"buildChildId() + 'Label'\"\n            [class.visually-hidden]=\"isLabelSrOnly()\"\n            [class.vd-p]=\"!isLabelSrOnly()\"\n        >\n            <span [innerHTML]=\"label()\"></span>\n            @if (!required() && !hideNotRequiredExtraLabel()) {\n                <span aria-hidden=\"true\">\n                    {{ 'foehn-input.optional' | fromDictionary }}\n                </span>\n            }\n        </p>\n    }\n\n    <foehn-validation-alerts [component]=\"this\" />\n\n    @if (helpText() && type !== 'hidden') {\n        <small\n            [attr.id]=\"buildChildId() + 'Help'\"\n            class=\"form-text text-secondary\"\n            [innerHTML]=\"helpText()\"\n        ></small>\n    }\n\n    <!-- Fake input with NgModel to be registered into Form controls -->\n    <input type=\"hidden\" [name]=\"name() || label()\" [ngModel]=\"model()\" />\n\n    <!-- Templates must be stored inside component so that \"@ViewChildren subComponents\" can be filled up with FoehnInputComponent -->\n    <ng-content />\n\n    <div class=\"row\" [id]=\"buildId() || 'foehn-table'\">\n        <div class=\"col-12\">\n            @if (!!totalElements() && totalElements() === 1) {\n                <h4>\n                    {{ 'foehn-table.totalElements.1' | fromDictionary }}\n                </h4>\n            }\n            @if (!!totalElements() && totalElements() !== 1) {\n                <h4>\n                    {{\n                        'foehn-table.totalElements'\n                            | fromDictionary\n                                : { total: totalElements().toString() }\n                    }}\n                </h4>\n            }\n        </div>\n\n        <div class=\"col-12 table-responsive\">\n            <table class=\"table table-hover {{ tableClass() }}\" #entryComponent>\n                @if (title()?.length) {\n                    <caption [class.visually-hidden]=\"titleSrOnly()\">\n                        {{\n                            title()\n                        }}\n                    </caption>\n                }\n                <thead>\n                    <tr>\n                        @for (\n                            col of columnsConfiguration();\n                            track trackFoehnTableColumnConfiguration(\n                                $index,\n                                col\n                            )\n                        ) {\n                            <th\n                                class=\"vd-bg-pattern-bars-gray\"\n                                scope=\"col\"\n                                [id]=\"col.id\"\n                            >\n                                @if (\n                                    !filteredList.length || !col.sortAttribute\n                                ) {\n                                    <span\n                                        [innerHTML]=\"\n                                            col.columnLabelKey | fromDictionary\n                                        \"\n                                    ></span>\n                                }\n                                @if (\n                                    !!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\n                                                | fromDictionary)\n                                        \"\n                                    >\n                                        <span\n                                            [innerHTML]=\"\n                                                col.columnLabelKey\n                                                    | fromDictionary\n                                            \"\n                                        ></span>\n                                        @if (\n                                            sort().sortAttribute ===\n                                            col.sortAttribute\n                                        ) {\n                                            @if (\n                                                sort().sortDirection === 'ASC'\n                                            ) {\n                                                <span class=\"ms-3\">\n                                                    <foehn-icon-chevron-up />\n                                                </span>\n                                            }\n                                            @if (\n                                                sort().sortDirection === 'DESC'\n                                            ) {\n                                                <span class=\"ms-3\">\n                                                    <foehn-icon-chevron-down />\n                                                </span>\n                                            }\n                                        }\n                                    </a>\n                                }\n                            </th>\n                        }\n                    </tr>\n                </thead>\n                <tbody>\n                    @for (\n                        item of filteredList;\n                        track trackByFn()(index, item);\n                        let index = $index\n                    ) {\n                        <tr\n                            #tableRowElement\n                            (click)=\"manageRowClick(tableRowElement, item)\"\n                        >\n                            @for (\n                                col of columnsConfiguration();\n                                track trackFoehnTableColumnConfiguration(\n                                    $index,\n                                    col\n                                )\n                            ) {\n                                <td [id]=\"col.id + '-' + index\">\n                                    @if (!!col.isImportant) {\n                                        @if (col.isImportant(item)) {\n                                            <span\n                                                class=\"cell-vertical-align-middle\"\n                                            >\n                                                <svg\n                                                    xmlns=\"http://www.w3.org/2000/svg\"\n                                                    width=\"30\"\n                                                    height=\"30\"\n                                                    fill=\"currentColor\"\n                                                    class=\"bi bi-exclamation text-danger\"\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                                        }\n                                    }\n                                    @if (!!col.iconGetter) {\n                                        @if (col.iconGetter(item); as iconDef) {\n                                            <span\n                                                class=\"cell-vertical-align-middle me-2\"\n                                            >\n                                                <fa-icon\n                                                    aria-hidden=\"true\"\n                                                    [icon]=\"iconDef.icon\"\n                                                    [title]=\"iconDef.label\"\n                                                />\n                                                <span class=\"visually-hidden\">\n                                                    {{ iconDef.label }}\n                                                </span>\n                                            </span>\n                                        }\n                                    }\n                                    @if (!!col.template) {\n                                        <ng-template\n                                            [ngTemplateOutlet]=\"col.template\"\n                                            [ngTemplateOutletContext]=\"{\n                                                item: item,\n                                                index: index,\n                                            }\"\n                                        />\n                                    }\n                                    @if (!col.template) {\n                                        <span\n                                            [innerHTML]=\"col.valueGetter(item)\"\n                                            class=\"cell-vertical-align-middle\"\n                                        ></span>\n                                    }\n                                </td>\n                            }\n                        </tr>\n                    }\n                    @if (!!columnsConfiguration() && !filteredList.length) {\n                        <tr>\n                            <td [colSpan]=\"columnsConfiguration().length\">\n                                <div class=\"w-100 text-center\">\n                                    {{\n                                        'foehn-table.totalElements.0'\n                                            | fromDictionary\n                                    }}\n                                </div>\n                            </td>\n                        </tr>\n                    }\n                </tbody>\n            </table>\n\n            @if (hasPreviousPage() || hasNextPage()) {\n                <nav\n                    [id]=\"buildId('_navContainer')\"\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        @if (hasPreviousPage()) {\n                            <li\n                                class=\"vd-pagination__item vd-pagination__item--previous\"\n                            >\n                                <button\n                                    [id]=\"buildId('_prevButton')\"\n                                    type=\"button\"\n                                    class=\"btn 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 />\n                                        {{ previousLabel() }}\n                                    </span>\n                                    <span class=\"visually-hidden\">:</span>\n                                    <span class=\"vd-pagination__label\">\n                                        {{ currentPage - 1 }} sur\n                                        {{ pagesCount() }}\n                                    </span>\n                                </button>\n                            </li>\n                        }\n                        @if (hasNextPage()) {\n                            <li\n                                class=\"vd-pagination__item vd-pagination__item--next\"\n                            >\n                                <button\n                                    [id]=\"buildId('_nextButton')\"\n                                    type=\"button\"\n                                    class=\"btn 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 />\n                                    </span>\n                                    <span class=\"visually-hidden\">:</span>\n                                    <span class=\"vd-pagination__label\">\n                                        {{ currentPage + 1 }} sur\n                                        {{ pagesCount() }}\n                                    </span>\n                                </button>\n                            </li>\n                        }\n                    </ul>\n                </nav>\n            }\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;text-decoration-line:none}.vd-pagination{margin-bottom:1rem}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}:host ::ng-deep .btn.btn-link .svg-inline--fa{color:var(--vd-primary-dark)}:host ::ng-deep .btn.btn-link:hover .svg-inline--fa{color:var(--vd-neutral-dark)}.btn.btn-link{text-transform:none}.cell-vertical-align-middle{vertical-align:middle}\n"] }]
-        }], propDecorators: { columnsConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsConfiguration", required: false }] }, { type: i0.Output, args: ["columnsConfigurationChange"] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], fixedPageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedPageCount", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], totalElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalElements", required: false }] }], titleSrOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleSrOnly", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }] } });
+        }], propDecorators: { columnsConfiguration: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsConfiguration", required: false }] }, { type: i0.Output, args: ["columnsConfigurationChange"] }], itemsPerPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsPerPage", required: false }] }], fixedPageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedPageCount", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }, { type: i0.Output, args: ["sortChange"] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], totalElements: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalElements", required: false }] }], titleSrOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleSrOnly", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], tableClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableClass", required: false }] }], trackByFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackByFn", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }] } });
 
 class DraftsService {
     constructor() {
@@ -9330,12 +9331,11 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
     manageSuggestionListAndFocusAfterRemovingAnItem(removedIndex) {
         // Hide message saying no more suggestions to display
         this.showEmptyListMessage = false;
-        const autocompleteComponent = this.autocompleteComponent();
-        if (autocompleteComponent) {
+        if (this.autocompleteComponent()) {
             // Manually show autocomplete because there is at least one suggestions to display
-            autocompleteComponent.inputElement().nativeElement.hidden = false;
+            this.autocompleteComponent().inputElement().nativeElement.hidden = false;
             // Add back selected item to autocomplete suggestion list
-            autocompleteComponent.elements.set(this.filterAutocompleteElements(this.elements()));
+            this.autocompleteComponent().elements.set(this.filterAutocompleteElements(this.elements()));
         }
         if (removedIndex !== null) {
             // When deleting a selected item, check were to set focus back when no more items to delete
@@ -14498,7 +14498,7 @@ class FoehnListSummaryComponent extends FoehnInputComponent {
         })
             .then(() => {
             const updatedList = this.internalList().filter((_item, itemIndex) => itemIndex !== index);
-            this.internalList.set(updatedList);
+            this.updateNgModel(updatedList);
             this.updateListCopyForTable(updatedList);
             this.itemRemoved.emit();
         }, () => {
@@ -14507,7 +14507,7 @@ class FoehnListSummaryComponent extends FoehnInputComponent {
     }
     changeSort(sortEvent) {
         const sortedList = this.sortNow(this.internalList(), sortEvent);
-        this.internalList.set(sortedList);
+        this.updateNgModel(sortedList);
         this.updateListCopyForTable(sortedList);
         this.tableSort = sortEvent;
     }