src/app/shared/controls/select/components/select-group/select-group.component.html

<!-------------------------------------------------------------------------------
 * Copyright (c) 2020 Contributors to the Eclipse Foundation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Eclipse Public License 2.0 which is available at
 * http://www.eclipse.org/legal/epl-2.0
 *
 * SPDX-License-Identifier: EPL-2.0
 -------------------------------------------------------------------------------->

<ng-container *ngFor="let group of appGroups; let groupIndex = index; trackBy: trackByIndex">

  <div class="select-group-title">
    {{group.label}}
  </div>


  <div class="select-group">
    <div
      *ngFor="let pair of appOptions | filterOptionsByGroup : group : appValue | pair : appPairSize ? appPairSize : (group?.options?.length < 4 ? 1 : 2); let optionIndex = index; trackBy: trackByIndex;"
      class="select-group--pair">
      <div *ngFor="let option of pair; let pairIndex = index; trackBy: trackByIndex"
           class="select-group-entry">

        <div class="select-group-entry--control">
          <ng-template #iconTemplate>
            <mat-icon class="select-group-entry--icon">
              {{ option?.isSelected ? 'check_box' : (option?.isIndeterminate ? "indeterminate_check_box" : "crop_square")}}
            </mat-icon>
          </ng-template>

          <input #inputElement (keydown.enter)="inputElement.click()"
                 (ngModelChange)="toggleCheckbox(option?.value, option?.isSelected, option?.isIndeterminate, inputElement)"
                 *ngIf="!appHideControls; else iconTemplate"
                 [class.cursor-pointer]="!appHideControls && !appDisabled"
                 [disabled]="appDisabled"
                 [id]="appId + '.' + groupIndex + '.' + optionIndex + '.' + pairIndex"
                 [indeterminate]="option?.isIndeterminate"
                 [ngModel]="option?.isSelected && !option?.isIndeterminate"
                 class="select-group-entry--input"
                 type="checkbox">
        </div>

        <label
          [class.cursor-pointer]="!appHideControls && !appDisabled"
          [for]="appId + '.' + groupIndex + '.' + optionIndex + '.' + pairIndex"
          class="select-group-entry--label">
          {{option.label}}
        </label>
      </div>

    </div>
  </div>

</ng-container>