<div
  class="dropdown"
  style="border: 0; margin-left: -1px"
  container="body"
  #dropdown="bs-dropdown"
  dropdown
  [insideClick]="true"
  [isDisabled]="disabled"
>
  <button
    class="dropdown-toggle form-control p-t-0 p-b-0 l-h-1 d-flex a-i-center"
    [attr.aria-label]="(value ? AGGREGATION_TEXTS[value] : AGGREGATION_TEXTS.undefined) | translate"
    tooltip="{{
      (value
        ? AGGREGATION_TEXTS[value]
        : disabled
          ? AGGREGATION_TEXTS.disabled
          : AGGREGATION_TEXTS.undefined
      ) | translate
    }}"
    placement="top"
    container="body"
    type="button"
    [adaptivePosition]="false"
    [delay]="500"
    dropdownToggle
  >
    <i
      class="icon-14"
      [c8yIcon]="value ? AGGREGATION_ICONS[value] : AGGREGATION_ICONS.undefined"
    ></i>
    <span class="caret m-r-8 m-l-4"></span>
  </button>

  <ul
    class="dropdown-menu dropdown-menu-right--xs"
    *dropdownMenu
  >
    <li
      *ngFor="let aggregation of AGGREGATIONS"
      [ngClass]="{
        active: aggregation.id === value,
        disabled: disabledAggregations[aggregation.id]
      }"
    >
      <button
        class=""
        (click)="onChange(aggregation.id); dropdown.isOpen = false"
        [disabled]="disabledAggregations[aggregation.id]"
      >
        <i
          class="icon-14"
          [c8yIcon]="
            aggregation.id ? AGGREGATION_ICONS[aggregation.id] : AGGREGATION_ICONS.undefined
          "
        ></i>
        <span>{{ aggregation.title | translate }}</span>
      </button>
    </li>
  </ul>
</div>