SQ-UI/ng-sq-ui

<div class="input-field dropdown"
     [ngClass]="{'disabled': disabled}"
     sqOutsideClickListener
     [listenForOutsideClick]="listenForOutsideClick"
     (clickOutside)="onClickOutsideComponent()"
     (click)="toggleOptionsDropdown();">

  <div class="label">{{controlLabel}}</div>

  <ng-template #defaultSelectedItemTemplate>
    <div class="chosen-item" *ngIf="value">{{value.label}}</div>
  </ng-template>
  <ng-template *ngIf="value"
               [ngTemplateOutlet]="selectedItemTemplate || defaultSelectedItemTemplate"
               [ngTemplateOutletContext]="{ value: value }">
  </ng-template>

  <div class="input-placeholder" *ngIf="!value">{{controlPlaceholder}}</div>

  <ng-template #defaultChevronTemplate>
    <i class="fas fa-chevron-down dropdown-icon"
       aria-hidden="true">
    </i>
  </ng-template>
  
  <ng-template [ngTemplateOutlet]="chevronTemplate || defaultChevronTemplate"
               [ngTemplateOutletContext]="{ isDropdownOpen: isOpen }">
  </ng-template>

  <div class="options" *ngIf="isOpen">
    <ng-container *ngFor="let option of options">
      <div (click)="selectOption(option)">
        <ng-template #defaultOptionTemplate>
          <div class="option">
            {{option.label}}
          </div>
        </ng-template>

        <ng-template [ngTemplateOutlet]="optionTemplate || defaultOptionTemplate"
                     [ngTemplateOutletContext]="{ option: option }">
        </ng-template>
      </div>
    </ng-container>
  </div>
</div>