Merge "Add Reuired and Optional checkbox to mapping table"

2 files changed, 30 insertions, 1 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
index 495f8e19c..d93d49dba 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
@@ -172,6 +172,13 @@
                                         (click)="selectProp(dict.name)"></td> -->
                                 </td>
                                 <td>
+                                    <div class="custom-control custom-checkbox reuiredInput">
+                                        <input type="checkbox" class="custom-control-input"
+                                            id="customCheck-{{dict.name}}" [checked]="selectedProps.has(dict.name)"
+                                            (click)="selectProp(dict.name)">
+                                        <label class="custom-control-label" for="customCheck-{{dict.name}}"></label>
+                                    </div>
+                                    
                                     <img *ngIf="dict.definition?.property?.required"
                                         src="/assets/img/icon-required-yes.svg">
                                     <img *ngIf="!dict.definition?.property?.required"
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 2d7e23094..91b1f8652 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -18,7 +18,7 @@ body{
   transition: 0.3s !important;
 }
 /*Bootstrap*/
-.custom-control-input:checked ~ .custom-control-label::before {
+.custom-control-input:checked ~ .custom-control-label::before{
   border-color: transparent !important;
 }
 .btn-outline-danger{
@@ -33,6 +33,28 @@ body{
   border: solid 1px #C3CDDB !important;
   border-radius: 0 !important;
 }
+.reuiredInput .custom-control-label::before{
+  width: 18px !important;
+  height: 18px !important;
+  border-radius: 50% !important;
+}
+
+.reuiredInput .custom-control-label::after{
+  content: "_";
+  color: #C4CEDB !important;
+  width: 18px !important;
+  height: 18px !important;
+  line-height: 6px;
+  text-align: center;
+}
+.reuiredInput .custom-control-input:checked ~ .custom-control-label::after{
+  top: 4px !important;
+  left: -24px !important; 
+  content: "";
+}
+.reuiredInput .custom-control-input:checked ~ .custom-control-label::before{
+  background: #66BB00 !important;
+}
 .custom-control-input:checked ~ .custom-control-label::before{
   background: #1B3E6F !important;
 }