<div *ngIf="facets?.name !== 'Topic'">
  <ion-header>
    <ion-toolbar>
      <ion-title class="subtitle">{{ 'CHOOSE_FROM_FOLLOWING' | translate }}</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-grid class="scroll-list" *ngIf="facets?.name !== 'Organization' && facets?.name !== 'Purpose'">
      <ion-row *ngIf="facets?.values && facets?.values?.length">
        <ion-col size="6" *ngFor="let facetValue of facets?.values; let index=index">
          <ion-item no-lines class="ion-no-padding">
            <ion-label class="ion-text-capitalize">{{ facetValue }}</ion-label>
            <ion-checkbox [checked]="isSelected(facetValue)" (ionChange)="changeValue(facetValue, index)">
            </ion-checkbox>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-grid class="scroll-list" *ngIf="facets?.name === 'Purpose'">
      <ion-row *ngIf="facets?.values && facets?.values?.length">
        <ion-col size="12" *ngFor="let facetValue of facets?.values; let index=index">
          <ion-item no-lines class="ion-no-padding">
            <ion-label class="ion-text-capitalize">{{ facetValue }}</ion-label>
            <ion-checkbox [checked]="isSelected(facetValue)" (ionChange)="changeValue(facetValue, index)">
            </ion-checkbox>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>
    <ion-grid class="scroll-list" *ngIf="facets?.name === 'Organization'">
      <ion-row *ngIf="facets?.values && facets?.values?.length">
        <ion-col size="6" *ngFor="let facetValue of facets?.values; let index=index">
          <ion-item no-lines class="ion-no-padding">
            <ion-label class="ion-text-capitalize">{{ facetValue.orgName }}</ion-label>
            <ion-checkbox [checked]="isSelected(facetValue.hashTagId)"
              (ionChange)="changeValue(facetValue.hashTagId, index)"></ion-checkbox>
          </ion-item>
        </ion-col>
      </ion-row>
    </ion-grid>
  </ion-content>
  <ion-footer class="footer">
    <ion-row>
      <ion-col>
        <ion-button expand="block" (click)="confirm()">{{ 'SELECT' | translate }}</ion-button>
      </ion-col>
    </ion-row>
  </ion-footer>
</div>
<div *ngIf="facets?.name === 'Topic'">

  <ion-header>
    <ion-toolbar position="top">
      <ion-title class="subtitle pull-left"> {{ 'TOPICS' | translate }} </ion-title>
      <ion-title class="subtitle pull-right" style="padding-right: 10px;"> {{ 'SELECTED_TOPICS' | translate }}
        {{getSelectedOptionCount(facets)}} </ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content [fullscreen]="true" class="ion-no-padding">
    <ion-searchbar (ionInput)="getItems($event)" #input debounce="1000" [spellcheck]="true" [autocomplete]="true"
      class="subtitle"></ion-searchbar>
    <div class="scroll-list" *ngIf="showTopicFilterList">
      <ion-list class="topic-item">
        <ion-item *ngFor="let items of filteredTopicArr" (click)="changeValue(items.name, index)">
          <span
            [ngClass]="{'text-selected':isSelected(items.name), 'text-unselected':!isSelected(items.name)}">{{ items.name }}</span>
          <ion-icon class="icon-margin" item-right name='checkmark' *ngIf="isSelected(items.name)"
            style="color : green; margin:0 10px;"></ion-icon>
        </ion-item>
      </ion-list>
    </div>
    <div class="scroll-list" *ngIf="!showTopicFilterList">
      <ion-list class="topic-item">
        <ion-item *ngFor="let facetValue of topicsArr; let i=index" no-lines class="div-space ion-no-padding">
          <div class="ion-text-wrap" (click)="toggleGroup(i)" [ngClass]="{active: isGroupShown(i)}" style="font-size: 16px;">
            <ion-col size="1" style="margin-left:15px;padding: 0;">
              <ion-icon class="icon-margin" item-left [name]="isGroupShown(i) ? 'remove' : 'add'"></ion-icon>
            </ion-col>
            <ion-col size="11" style="padding:0;margin-left:0;">
              <span>
                {{facetValue}}
              </span>
            </ion-col>
          </div>
          <div *ngIf="isGroupShown(i)" style="width: 60%">
            <div *ngFor="let items of topicsVal[i]; let item = index">
              <div [ngClass]="{'text-selected':isSelected(items.name),'text-unselected':!isSelected(items.name)}"
                (click)="changeValue(items.name, index)"><span>
                {{items.name}}</span>
                <span style="margin-top: 20%">
                  <ion-icon item-right name='checkmark' *ngIf="isSelected(items.name)"
                    style="color : green; margin:0 5px;"></ion-icon>
                </span>
              </div>
            </div>
          </div>
        </ion-item>
      </ion-list>
    </div>
  </ion-content>
    <ion-footer class="topicFooter">
      <ion-row>
        <ion-col>
          <ion-button fill="outline" expand="block" (click)="cancel()">{{ 'CANCEL' | translate }}</ion-button>
        </ion-col>
        <ion-col>
          <ion-button expand="block" (click)="apply()">{{ 'APPLY' | translate }}</ion-button>
        </ion-col>
      </ion-row>
    </ion-footer>
</div>

./page-filter-options.page.scss

@import "src/assets/styles/_custom-mixins.scss";
@import "src/assets/styles/_variables.scss";
.subtitle {
      text-transform: capitalize;
      font-size: 1.3rem;
      font-weight: 700 !important;
      color: #3b5998;
    }
    ion-item {
      padding-left: 0 !important;
      .checkbox {
        margin: 8px !important;
      }
      ion-label {
        font-size: 0.875rem !important;
        text-overflow: unset !important;
        white-space: unset !important;
      }
    }
    .col {
      min-height: 3.3rem !important;
    }
    .scroll-list {
      overflow-y: scroll;
      max-height: 50vh !important; 
      padding-bottom: 10vh !important;
      margin-left: 1.7%;
    }
    .item-md {
      font-size: 1.3rem !important;
      font-weight: 600 !important;
    }
  
    .footer{
      background: #FFF;
      bottom: 0;
   }
   .topicFooter
   {
    bottom: 0;
    color: #fff
   }
  
  .resource-filter-options .popover-content {
    margin: 0;
    width: 100% !important;
    max-height: 70% !important;
    box-shadow: unset;
    position: fixed;
    @include ltr() {
      left: 0 !important;
    }
  
    @include rtl() {
      right: 0 !important;
    }
    top: unset !important;
    bottom: 0;
    transform-origin: bottom -100% !important;
    transform: translateY(0) !important;
  }
  
  .resource-filter-options ion-backdrop {
    background-color: map-get($colors, black) !important;
    opacity: 0.4 !important;
  }
  .text-unselected{
    padding-left: 20%;
    color : black;
    margin-bottom: 5px;
    margin-top: 2px;
  }
  .text-selected{
    padding-left: 20%;
    color : blue; 
    margin-bottom: 5px;
    margin-top: 2px;
  }
  .pull-left{
   float: left;
  }
  .pull-right{
    float: right;
  }
  .icon-margin{
    margin:0 10px !important;
  }
  .div-space .item-inner .input-wrapper .label-md {
    @include margin(5px 8px 5px 0 !important);
  }
  
  .filter-item {
    width: auto;
    margin: 16px !important;
    background-color: map-get($colors, white_f0);
    color: map-get($colors, dark_gray);
    font-size: 1rem;
    font-weight: 600 !important;
    height: 2rem;
    ion-icon {
      color: map-get($colors, dark_gray);
    }
   .topic-item {
      @extend .filter-item ;
      height: 100%;
    }
  }