Issue #SB-23410 fix:Merge pull request #27 from NavKumarV/release-3.7.0-v8

Issue #SB-23410 fix: reintroducting platform dependent popup

package.json

 {
   "name": "common-form-elements",
-  "version": "3.7.2",
+  "version": "3.7.3",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

projects/common-form-elements/package.json

 {
   "name": "common-form-elements",
-  "version": "3.7.2",
+  "version": "3.7.3",
   "peerDependencies": {
     "@angular/common": "^8.0.0",
     "@angular/core": "^8.0.0",

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

 <div [formGroup]="formGroup">
   <ng-container *ngFor="let field of config; let index = i">
     <div *ngIf="field.type === FieldConfigInputType.SELECT || field.type === FieldConfigInputType.NESTED_SELECT" [hidden]="field.templateOptions?.hidden || null">
-     <ng-container *ngIf="platform==='mobile'">
       <sb-multiple-dropdown [context]="field.context ? formGroup.get(field.context) : null " [default]="field.default"
         [formControlRef]="formGroup.get(field.code)" [options]="field.templateOptions?.options"
         [label]="field.templateOptions.label" [dataLoadStatusDelegate]="dataLoadStatusDelegate"
         [disabled]="field.templateOptions?.disabled" [placeHolder]="field?.templateOptions?.placeHolder" 
-        [isMultiple]="field.templateOptions.multiple" [labelHtml]="field.templateOptions.labelHtml">
+        [isMultiple]="field.templateOptions.multiple" [labelHtml]="field.templateOptions.labelHtml"
+        [platform]="platform">
       </sb-multiple-dropdown>
-    </ng-container>
-    <ng-container *ngIf="platform==='web'">
-      <div *ngIf="field.type === FieldConfigInputType.SELECT && !field.templateOptions.multiple" [hidden]="field.templateOptions?.hidden || null">
-        <sb-dropdown [context]="field.context ? formGroup.get(field.context) : null " [default]="field.default"
-          [formControlRef]="formGroup.get(field.code)" [label]="field.templateOptions.label"
-          [dataLoadStatusDelegate]="dataLoadStatusDelegate" [options]="field.templateOptions?.options"
-          [disabled]="field.templateOptions?.disabled" [placeHolder]="field?.templateOptions?.placeHolder"
-          [labelHtml]="field.templateOptions.labelHtml">
-        </sb-dropdown>
-      </div>
-    <div *ngIf="field.type === FieldConfigInputType.NESTED_SELECT" [hidden]="field.templateOptions?.hidden || null">
-      <sb-dropdown [context]="field.context ? formGroup.get(field.context) : null " [default]="field.default"
-        [formControlRef]="formGroup.get(field.code)" [label]="field.templateOptions.label"
-        [dataLoadStatusDelegate]="dataLoadStatusDelegate" [options]="field.templateOptions?.options"
-        [disabled]="field.templateOptions?.disabled" [placeHolder]="field?.templateOptions?.placeHolder"
-        [labelHtml]="field.templateOptions.labelHtml">
-      </sb-dropdown>
-    </div>
-    </ng-container>
     </div>
     <div *ngIf="field.type === FieldConfigInputType.INPUT" [hidden]="field.templateOptions?.hidden || null">
       <sb-textbox [formControlRef]="formGroup.get(field.code)" [asyncValidation]="field.asyncValidation" [label]="field.templateOptions.label"

projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.css

-@import "../../../../node_modules/common-consumption-styles/assets/styles";
+@import "../../../../../node_modules/common-consumption-styles/assets/_colors.scss";
 
-.multi-select-section{
+.multi-select-section-app {
     margin: 1rem 0;
 }
 
 label{
-    font-size: 1rem;
+    font-size: 14px;
+    font-weight: normal;
     margin: 0
 }
 
@@ -16,16 +17,14 @@ label{
 
 .multi-select-container .caret-down {
     position: absolute;
-    top: 11px;
+    top: 12px;
     right: 19px;
     z-index: 0;
 }
 
 .multi-select-container .list-border .placeholder {
-    font-size: 12px;
-    font-weight: 700;
-    margin-left: 12px;
-    color: var(--gray-100)
+    margin: 0;
+    color: var(--gray-100);
 }
 
 .multi-select-container .list-border ul[disabled] {
@@ -35,17 +34,20 @@ label{
 
 .multi-select-container .list-border ul {
     list-style-type: none;
-    margin-top: 3px;
-    margin-left: 8px;
     position: absolute;
-    top: 0%;
-    left: 0;
+    margin: 0;
+    font-size: 14px;
+    font-weight: bold;
 }
 
 .multi-select-container .list-border {
     border: 0.5px solid var(--gray-400);
     padding: 1.3rem;
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    left: 0;
+    height: 40px;
 }
 
 .multi-select-container .list-border li {
@@ -266,4 +268,56 @@ label{
     -webkit-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
-}
\ No newline at end of file
+}
+
+.sb-modal-dropdown-web ul {
+    list-style-type: none;
+    display: block;
+    position: absolute;
+    top: 38px;
+    left: 0;
+    background-color: white;
+    width: 100%;
+    z-index: 999;
+    box-shadow: 2px 2px 2px 2px aliceblue;
+    border: 2px solid #80a7ce;
+    max-height: 314px;
+    overflow: scroll;
+}
+
+.sb-modal-dropdown-web ul li {
+    margin-top: 10px;
+    margin-bottom: 8px;
+    padding: 8px;
+    font-size: 13px;
+}
+
+.sb-modal-dropdown-web .selected-option {
+    font-weight: bold;
+    background-color: #eee;
+}
+
+
+/* width */
+::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: #f1f1f1; 
+  }
+   
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: #888; 
+  }
+  
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: #555; 
+  }
+
+  .cursor-pointer {
+      cursor: pointer;
+  }

projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.html

-<div class="multi-select-section">
+<div class="multi-select-section-app">
   <label class="input-label" *ngIf="label">{{label}}</label>
   <div *ngIf="labelHtml" [innerHTML]="labelHtml | transposeHtml"></div>
   <div class="multi-select-container">
     <sb-caret-down class="caret-down"
-      [attr.disabled]="disabled ? true : ( context ? (context.invalid ? true : null) : null )" (click)="openModal()">
+      [attr.disabled]="disabled ? true : ( context ? (context.invalid ? true : null) : null )" (click)="openModal($event)">
     </sb-caret-down>
-    <div class="list-border" (click)="openModal()">
+    <div class="list-border" (click)="openModal($event)">
       <ul [attr.disabled]="disabled ? true : ( context ? (context.invalid ? true : null) : null )">
         <ng-container *ngIf="isMultiple">
           <li *ngIf="!formControlRef.value || !formControlRef.value.length" class="placeholder">{{placeHolder}}</li>
@@ -25,7 +25,7 @@
         </ng-container>
       </ul>
     </div>
-    <div class="sb-modal-container" [hidden]="!showModal" (click)="showModal=false;">
+    <div class="sb-modal-container" *ngIf="platform === 'mobile'" [hidden]="!showModal" (click)="showModal=false;">
       <div class="sb-modal-overlay">
         <div class="sb-modal" (click)="$event.stopPropagation()">
           <div class="header">
@@ -55,5 +55,14 @@
         </div>
       </div>
     </div>
+    <div class="sb-modal-dropdown-web" *ngIf="platform === 'web'"  [hidden]="!showModal" (click)="showModal=false;">
+      <ul>
+        <li *ngFor="let option of resolvedOptions; let i=index" [ngClass]="{'selected-option':tempValue.includes(option.get('value'))}">
+          <div (click)="addSelected(option); !isMultiple && onSubmit()">
+            <span>{{option.get('label')}}</span>
+          </div>
+        </li>
+      </ul>
+    </div>
   </div>
 </div>
\ No newline at end of file

projects/common-form-elements/src/lib/multiple-dropdown/multiple-dropdown.component.ts

-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, HostListener, ViewChild } from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {from, Subject} from 'rxjs';
 import {FieldConfigOptionsBuilder} from '../common-form-config';
@@ -21,6 +21,7 @@ export class MultipleDropdownComponent implements OnInit, OnChanges, OnDestroy {
   @Input() isMultiple?: boolean;
   @Input() context?: FormControl;
   @Input() formControlRef?: FormControl;
+  @Input() platform: any;
   @Input() default?: any;
   @Input() contextData: any;
   @Input() dataLoadStatusDelegate: Subject<'LOADING' | 'LOADED'>;
@@ -33,6 +34,12 @@ export class MultipleDropdownComponent implements OnInit, OnChanges, OnDestroy {
 
   private dispose$ = new Subject<undefined>();
 
+  @HostListener('document:click')
+  docClick() {
+    if (this.showModal) {
+      this.showModal = false;
+    }
+  }
   constructor(
     private changeDetectionRef: ChangeDetectorRef
   ) {
@@ -71,14 +78,29 @@ export class MultipleDropdownComponent implements OnInit, OnChanges, OnDestroy {
     this.formControlRef.markAsDirty();
     this.showModal = false;
   }
-  openModal() {
+  openModal(event) {
     if (this.context && this.context.invalid) {
       return;
     }
 
     this.setTempValue(this.formControlRef.value);
+    const htmlCollection = document.getElementsByClassName('sb-modal-dropdown-web');
+    const modalElements = Array.from(htmlCollection);
+    const isModalAlreadyOpened = modalElements.some((element: HTMLElement) => element.hidden === false );
+
+    if (this.platform === 'web' && isModalAlreadyOpened && !this.showModal) {
+      modalElements.forEach((item: HTMLElement) => {
+        item.hidden = true;
+      });
+    }
+
+    if (this.platform === 'web' && this.showModal) {
+      this.showModal = false;
+    } else {
+      this.showModal = true;
+    }
 
-    this.showModal = true;
+    event.stopPropagation();
   }
 
   addSelected(option: Map<string, string>) {