Merge "Add Reuired and Optional checkbox to mapping table"
diff --git a/cds-ui/designer-client/package-lock.json b/cds-ui/designer-client/package-lock.json
index 6ee9371..14feaad 100644
--- a/cds-ui/designer-client/package-lock.json
+++ b/cds-ui/designer-client/package-lock.json
@@ -10941,6 +10941,12 @@
}
}
},
+ "sonar-scanner": {
+ "version": "3.1.0",
+ "resolved": "https://registry.npmjs.org/sonar-scanner/-/sonar-scanner-3.1.0.tgz",
+ "integrity": "sha1-UcHBEB9UuYq8XYVlIJsdkjKXk0M=",
+ "dev": true
+ },
"sort-keys": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
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 495f8e1..d93d49d 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 2d7e230..91b1f86 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -18,7 +18,7 @@
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 @@
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;
}