<!--<select-->
<!--  [errorStateMatcher]="errorStateMatcher"-->
<!--  [formControl]="formControl"-->
<!--  [formlyAttributes]="field"-->
<!--  [id]="id"-->
<!--  [readonly]="to.readonly"-->
<!--  matNativeControl-->
<!--&gt;-->
<!--  <option [ngValue]="false">{{ T.G.NONE | translate }}</option>-->
<!--  @for (opt of projectService.list$ | async; track trackById($index, opt)) {-->
<!--    <option [ngValue]="opt.id">{{ opt.title }}</option>-->
<!--  }-->
<!--</select>-->
<mat-select
  [errorStateMatcher]="errorStateMatcher"
  [formControl]="formControl"
  [formlyAttributes]="field"
  [id]="id"
  [multiple]="to.multiple"
  (selectionChange)="onSelectionChange($event)"
>
  @if (to.multiple && triggerLabel()) {
    <mat-select-trigger>
      {{ triggerLabel() }}
    </mat-select-trigger>
  }
  @if (!field.props?.hideNoneOption) {
    <mat-option [value]="''">{{
      field.props?.defaultLabel || T.G.NONE | translate
    }}</mat-option>
  }
  @for (opt of projectService.listInTreeOrder$ | async; track trackById($index, opt)) {
    <mat-option [value]="opt.id">
      <select-option-row
        [title]="opt.title"
        [icon]="opt.icon"
        [defaultIcon]="DEFAULT_PROJECT_ICON"
        [color]="opt.theme?.primary"
        [folderPath]="projectFolderMap().get(opt.id)"
      ></select-option-row>
    </mat-option>
  }
</mat-select>
<!---->
