From 6e8510f636138f16f0438de37d59af4512f240d1 Mon Sep 17 00:00:00 2001
From: Renaud Michotte <renaud.michotte@gmail.com>
Date: Tue, 20 Oct 2020 08:29:33 +0200
Subject: [PATCH] editor: fix toggle wrapper if many

When there are many toggle wrappers on the same page, the 'click'
behavior is wrong: whatever switch button is clicked, only the first
element is toggled. This pull request fixes it.

Co-Authored-by: Renaud Michotte <renaud.michotte@gmail.com>
---
 .../wrappers/toggle-wrapper/toggle-wrappers.component.ts    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/projects/rero/ng-core/src/lib/record/editor/wrappers/toggle-wrapper/toggle-wrappers.component.ts b/projects/rero/ng-core/src/lib/record/editor/wrappers/toggle-wrapper/toggle-wrappers.component.ts
index d79a1354..520849a9 100644
--- a/projects/rero/ng-core/src/lib/record/editor/wrappers/toggle-wrapper/toggle-wrappers.component.ts
+++ b/projects/rero/ng-core/src/lib/record/editor/wrappers/toggle-wrapper/toggle-wrappers.component.ts
@@ -24,8 +24,10 @@ import { isEmpty, removeEmptyValues } from '../../utils';
     <div class='toggle-wrapper'>
       <div class='form-group'>
         <div class="custom-control custom-switch">
-          <input class="custom-control-input" type="checkbox" id="toggle-switch" (change)="toggle($event)" [checked]="tsOptions.enabled">
-          <label class="custom-control-label" for="toggle-switch" [tooltip]="tsOptions.description">{{ tsOptions.label }}</label>
+          <input class="custom-control-input" type="checkbox" id="toggle-switch-{{ field.id }}" \
+                 (change)="toggle($event)" [checked]="tsOptions.enabled">
+          <label class="custom-control-label" for="toggle-switch-{{ field.id }}" \
+                 [tooltip]="tsOptions.description">{{ tsOptions.label }}</label>
         </div>
       </div>
       <ng-container *ngIf="tsOptions.enabled" #fieldComponent></ng-container>