127705: Update dynamic list to bootstrap 5

Author: Joran De Braekeleer

src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html

@@ -9,8 +9,8 @@
       @for (columnItems of items; track columnItems) {
         <div class="col-sm">
           @for (item of columnItems; track item) {
-            <div  class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input"
+            <div  class="form-check">
+              <input type="checkbox" class="form-check-input"
                 [attr.aria-labelledby]="'label_' + model.id"
                 [attr.tabindex]="item.index"
                 [checked]="item.value"
@@ -21,7 +21,7 @@
                 (blur)="onBlur($event)"
                 (change)="onChange($event)"
                 (focus)="onFocus($event)"/>
-              <label class="custom-control-label"
+              <label class="form-check-label"
                 [class.disabled]="model.disabled"
                 [ngClass]="model.layout.element?.control"
                 [for]="item.id">
@@ -45,16 +45,16 @@
       @for (columnItems of items; track columnItems) {
         <div class="col-sm">
           @for (item of columnItems; track item) {
-            <div  class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input"
+            <div  class="form-check">
+              <input type="radio" class="form-check-input"
                 [checked]="item.value"
                 [id]="item.id"
                 [name]="model.id"
                 [required]="model.required"
                 [value]="item.index"
                 (blur)="onBlur($event)"
                 (focus)="onFocus($event)"/>
-              <label class="custom-control-label"
+              <label class="form-check-label"
                 [class.disabled]="model.disabled"
                 [ngClass]="model.layout.element?.control"
                 [for]="item.id">

src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts

@@ -179,8 +179,8 @@ describe('DsDynamicListComponent test suite', () => {
       });
 
       it('should set model value properly when a checkbox option is selected', () => {
-        const de = listFixture.debugElement.queryAll(By.css('div.custom-checkbox'));
-        const items = de[0].queryAll(By.css('input.custom-control-input'));
+        const de = listFixture.debugElement.queryAll(By.css('div.form-check'));
+        const items = de[0].queryAll(By.css('input.form-check-input'));
         const item = items[0];
         modelValue = [Object.assign(new VocabularyEntry(), { authority: 1, display: 'one', value: 1 })];
 
@@ -229,8 +229,8 @@ describe('DsDynamicListComponent test suite', () => {
       });
 
       it('should set model value properly when a checkbox option is deselected', () => {
-        const de = listFixture.debugElement.queryAll(By.css('div.custom-checkbox'));
-        const items = de[0].queryAll(By.css('input.custom-control-input'));
+        const de = listFixture.debugElement.queryAll(By.css('div.form-check'));
+        const items = de[0].queryAll(By.css('input.form-check-input'));
         const item = items[0];
         modelValue = [];
 
@@ -267,8 +267,8 @@ describe('DsDynamicListComponent test suite', () => {
       });
 
       it('should set model value when a radio option is selected', () => {
-        const de = listFixture.debugElement.queryAll(By.css('div.custom-radio'));
-        const items = de[0].queryAll(By.css('input.custom-control-input'));
+        const de = listFixture.debugElement.queryAll(By.css('div.form-check'));
+        const items = de[0].queryAll(By.css('input.form-check-input'));
         const item = items[0];
         modelValue = Object.assign(new VocabularyEntry(), { authority: 1, display: 'one', value: 1 });