multiple-dropdown.component.html

<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($event)">
    </sb-caret-down>
    <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>

          <ng-container *ngIf="formControlRef.value?.length">
            <span *ngFor="let value of formControlRef.value; let index=index">
              {{optionValueToOptionLabelMap.get(fromJS(value))}}<span
            *ngIf="index < formControlRef.value.length - 1">, </span>
            </span>
          </ng-container>
        </ng-container>

        <ng-container *ngIf="!isMultiple">
          <li *ngIf="!formControlRef.value" class="placeholder">{{placeHolder}}</li>

          <span *ngIf="formControlRef.value">{{optionValueToOptionLabelMap.get(fromJS(formControlRef.value))}}</span>
        </ng-container>
      </ul>
    </div>
    <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">
            {{placeHolder}}
          </div>
          <div class="body">
            <ul>
              <li *ngFor="let option of resolvedOptions; let i=index">
                <div (click)="addSelected(option)" class="row">
                  <label class="container" style="pointer-events: none">
                    <input [checked]="tempValue.includes(option.get('value'))" class="sb-checkbox" type="checkbox">
                    <span class="checkmark"></span>
                  </label>
                  <span>{{option.get('label')}}</span>
                </div>
              </li>
            </ul>
          </div>
          <div class="footer">
            <div class="sb-form-button">
              <button class="sb-btn-primary-outline" (click)="onCancel()">cancel</button>
            </div>
            <div class="sb-form-button">
              <button class="sb-btn-primary" (click)="onSubmit()">submit</button>
            </div>
          </div>
        </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>