<div class="filter-wrapper" *ngIf="filter">
  <div class="filter-item" [class.expand]="filter.expanded" (click)="filterConfirm(filter)" #menu>
    <span class="filter-name">{{ filter.name }}</span>
    <lib-icon class="icon" [rotateBackwards]="filter.expanded" transition="all 0.2s linear" width="17px" name="Arrow_Down_2"></lib-icon>
  </div>
  <div class="filter-menu" *ngIf="filter.expanded" [ngClass]="{ 'move-left': setContanerRightPosition }" [@fadeIn]="filter.expanded">
    <div class="item-container" [style.max-height.px]="containerHeight" (scroll)="scrollHandler($event)" #optionContainer>
      <div class="item" (click)="selectItem(item)" [class.active]="item.selected" *ngFor="let item of items">
        <div class="filter-checkbox">
          <lib-icon height="22px" name="Check_box"></lib-icon>
          <div class="checked-box" *ngIf="item.selected">
            <lib-icon name="Check_f"></lib-icon>
          </div>
        </div>
        <span class="item-name">
          {{ item.name }}
        </span>
      </div>
    </div>
    <div class="button">
      <a class="active" [ngClass]="{ inactive: inactive }" (click)="filterConfirm(filter)">Filtern</a>
    </div>
  </div>
  <ng-content></ng-content>
</div>
