<mat-chip-listbox [selectable]="false" [hidden]="showAppliedFilters === false">
  <ng-container *ngFor="let appliedFilter of appliedFilteringOptions; let i = index">
    <mat-basic-chip class="custom-filtering-chip space-chips"
                    *ngIf="appliedFilter.showField && i < 4" [disableRipple]="true">
      <span>
        {{appliedFilter.display || appliedFilter.field}}<span *ngIf="appliedFilter.fieldWithLookups.indexOf('date') < 0">:</span> {{appliedFilter.valueDisplay || appliedFilter.value}}
      </span>
      <a (click)="clearFilter(appliedFilter)">
        <mat-icon class="fl-icons remove-chip-btn" aria-label="remove">delete</mat-icon>
      </a>
    </mat-basic-chip>
  </ng-container>
  <mat-basic-chip class="custom-filtering-chip more-chip"
                  *ngIf="appliedFilteringOptions && appliedFilteringOptions.length >= 5" [matMenuTriggerFor]="menu">
    <span>
      More <mat-icon class="more-icon">keyboard_arrow_right</mat-icon>
    </span>
    <mat-menu #menu="matMenu" xPosition="before" yPosition="below" class="filtering-display-mat-menu">
      <div (click)="$event.stopPropagation()"
           class="more-item-container fl-detail"
           *ngFor="let subAppliedFilter of appliedFilteringOptions | slice:4; let i = index;">
        <span>
          {{subAppliedFilter.display || subAppliedFilter.field}}<span *ngIf="subAppliedFilter.fieldWithLookups.indexOf('date') < 0">:</span>&nbsp;
          {{subAppliedFilter.valueDisplay || subAppliedFilter.value}}
        </span>
        <a (click)="clearFilter(subAppliedFilter)" class="more-icon-removal">
          <mat-icon class="fl-icons fl-margin-top-small" aria-label="remove">delete</mat-icon>
        </a>
      </div>
    </mat-menu>
  </mat-basic-chip>
  <button mat-icon-button [attr.fl-tooltip]="'Hide\napplied\nfilters'" fl-tooltip-direction="down"
          class="hide-applied-filters-btn hide-gt-md" [class.hide]="hideMobileSwitch"
          (click)="showAppliedFilters = !showAppliedFilters">
    <mat-icon>keyboard_arrow_right</mat-icon>
  </button>
</mat-chip-listbox>
