From b00f489d0979ed7c2162dc8f7bd4d04468456576 Mon Sep 17 00:00:00 2001
From: Joran De Braekeleer <joran.debraekeleer@atmire.com>
Date: Fri, 25 Apr 2025 10:00:35 +0200
Subject: [PATCH 1/2] 127705: Reduce margins on input fields

---
 .../ds-dynamic-form-control-container.component.scss        | 6 +++++-
 .../models/list/dynamic-list.component.html                 | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.scss
index 494e4054048..c0c03055818 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.scss
@@ -40,5 +40,9 @@
 .col-form-label {
   padding-top: 0;
   padding-bottom: 0;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+label {
+  margin-bottom: 0.25rem;
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
index c4aade2ed78..574b9eb7115 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
@@ -7,7 +7,7 @@
       [formGroupName]="model.id"
       [ngClass]="model.layout.element?.control">
       @for (columnItems of items; track columnItems) {
-        <div class="col-sm ms-3">
+        <div class="col-sm">
           @for (item of columnItems; track item) {
             <div  class="custom-control custom-checkbox">
               <input type="checkbox" class="custom-control-input"
@@ -43,7 +43,7 @@
       [ngClass]="model.layout.element?.control"
       (change)="onChange($event)">
       @for (columnItems of items; track columnItems) {
-        <div class="col-sm ms-3">
+        <div class="col-sm">
           @for (item of columnItems; track item) {
             <div  class="custom-control custom-radio">
               <input type="radio" class="custom-control-input"

From 46a89533f018454a6baa19062a865965efb4158a Mon Sep 17 00:00:00 2001
From: Joran De Braekeleer <joran.debraekeleer@atmire.com>
Date: Fri, 2 May 2025 16:41:11 +0200
Subject: [PATCH 2/2] 127705: Update dynamic list to bootstrap 5

---
 .../models/list/dynamic-list.component.html          | 12 ++++++------
 .../models/list/dynamic-list.component.spec.ts       | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
index 574b9eb7115..3c58f495321 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
+++ b/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,8 +45,8 @@
       @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"
@@ -54,7 +54,7 @@
                 [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">
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
index 182b85ad50e..87f87d357aa 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
+++ b/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 });