Merge pull request #104 from venkateshwarans/release-4.3.0

Issue #SB-21820 feat: add dependency to multi select component

projects/common-form-elements/src/lib/common-form-config.ts

@@ -145,5 +145,6 @@ export interface CustomFormControl extends FormControl {
   customEventHandler$?: Subject<any>;
   shouldListenToCustomEvent?: Boolean;
   isVisible?: any;
+  range?: any;
   richTextCharacterCount?: any;
 }

projects/common-form-elements/src/lib/dynamic-checkbox/dynamic-checkbox.component.html

 <ng-container *ngIf="visible">
   <div class="sb-checkbox sb-checkbox-primary" [attr.data-title]="field.description ? field.description : null">
-    <input [attr.disabled]="disabled ? true : null" type="checkbox" [formControl]="formControlRef" id="{{_.kebabCase(field.name) || field.code}}"
+    <input [attr.disabled]="disabled ? true : null" type="checkbox" id="{{_.kebabCase(field.name) || field.code}}"
     name="{{_.kebabCase(field.name) || field.code}}" [checked]="checked" (change)="onChecklistChange($event.target.checked)">
     <label *ngIf="label" for="{{_.kebabCase(field.name) || field.code}}">{{label}}</label>
     <label class="label-html" *ngIf="labelHtml">

projects/common-form-elements/src/lib/dynamic-checkbox/dynamic-checkbox.component.ts

@@ -43,7 +43,7 @@ export class DynamicCheckboxComponent implements OnInit {
 
   _: any = _;
 
-  public checked: boolean;
+  public checked: any;
 
   constructor() { }
 

projects/common-form-elements/src/lib/dynamic-multi-select/dynamic-multi-select.component.ts

@@ -123,8 +123,17 @@ export class DynamicMultiSelectComponent implements OnInit, OnChanges, OnDestroy
       );
     }
 
+    this.handleDependsWithDefault();
+  }
 
-
+  handleDependsWithDefault() {
+    const value = _.first(_.map(this.depends, depend => depend.value));
+    if (!_.isEmpty(value) && _.toLower(value) === 'yes') {
+      this.formControlRef.isVisible = 'yes';
+      this.field.range = this.formControlRef.range;
+    } else {
+        this.formControlRef.isVisible = 'no';
+    }
   }
 
   ngOnDestroy(): void {

src/app/app.component.ts

@@ -361,6 +361,7 @@ export class AppComponent implements OnInit {
 
   setEvidence(control, depends: FormControl[], formGroup: FormGroup, loading, loaded) {
     control.isVisible = 'no';
+    control.range = evidenceMimeType;
     const response = merge(..._.map(depends, depend => depend.valueChanges)).pipe(
         switchMap((value: any) => {
             if (!_.isEmpty(value) && _.toLower(value) === 'yes') {