@if (!treeViewer()) {
  <mat-form-field class="flex-1" [appearance]="appearance" [floatLabel]="floatLabel" [color]="color()">
    <mat-label>{{ label }}</mat-label>

    @if (useAutocomplete) {
      <mat-chip-grid #chipGrid >
        <mat-chip-row *ngFor="let chip of chipList$ | async" (removed)="removeChip(chip)">
          <ngm-display-behaviour [option]="{value: chip.key, label: chip.label}"
            [displayBehaviour]="displayBehaviour">
          </ngm-display-behaviour>
          <button matChipRemove >
            <mat-icon>cancel</mat-icon>
          </button>
        </mat-chip-row>

        <mat-chip-row *ngIf="restChips?.length">+{{restChips?.length}}</mat-chip-row>
      </mat-chip-grid>
      <input #autoInput [placeholder]="placeholder"
        [formControl]="autoControl"
        [matChipInputFor]="chipGrid" [matAutocomplete]="auto"
        [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
        (matChipInputTokenEnd)="add($event)"
        (focus)="focus.emit($event)"
        (blur)="blur.emit($event)"
      />

      <!-- 
        [class.multiple]="multiple"
        [class.ngm-density__compact]="displayDensity==='compact'"
        [class.ngm-density__cosy]="displayDensity==='cosy'" -->
      <mat-autocomplete #auto="matAutocomplete" disableRipple class="ngm-tree-select__panel"
        [class]="'ngm-autocomplete-panel ' + (multiple ? 'multiple' : '') + ' ' + (displayDensity==='compact' ? 'ngm-density__compact' : '') + ' ' + (displayDensity==='cosy' ? 'ngm-density__cosy' : '')"
        [displayWith]="displayWith"
        [panelWidth]="panelWidth() || null"
        [autoActiveFirstOption]="autoActiveFirstOption"
        [autoSelectActiveOption]="autoSelectActiveOption"
        (opened)="onAutocompleteOpened()"
        (optionSelected)="onAutocompleteSelected($event)"
      >
        <cdk-virtual-scroll-viewport *ngIf="virtualScroll; else nonVirtualScroll" [itemSize]="virtualScrollItemSize"
          minBufferPx="200" maxBufferPx="400" class="ngm-tree-select__viewport">
          <mat-option *cdkVirtualFor="let option of selectOptions$ | async; trackBy: trackByFun" [value]="option"
            [class.mat-selected]="isSelected(option)"
          >

            <div class="flex-1 flex justify-start items-center" >
              <button mat-icon-button [displayDensity]="displayDensity"
                [style.visibility]="!option.expandable ? 'hidden' : ''"
                [style.marginLeft.px]="option.level * treeNodePaddingIndent"
                (click)="$event.stopPropagation(); treeControl.toggle(option)">
                <mat-icon class="mat-icon-rtl-mirror">
                  {{treeControl.isExpanded(option) ? 'expand_more' : 'chevron_right'}}
                </mat-icon>
              </button>

              <mat-checkbox *ngIf="multiple" class="flex-1"
                [checked]="isSelected(option)"
                (click)="$event.stopPropagation()"
                (change)="onCheckboxSelect($event, option)"
              >
                <ngm-display-behaviour [option]="{value: option.key, label: option.label}"
                  [displayBehaviour]="displayBehaviour"
                  [highlight]="autoHighlight">
                </ngm-display-behaviour>
              </mat-checkbox>

              <ngm-display-behaviour *ngIf="!multiple" class="flex-1"
                [option]="{value: option.key, label: option.label}"
                [displayBehaviour]="displayBehaviour"
                [highlight]="autoHighlight">
              </ngm-display-behaviour>
            </div>

          </mat-option>
        </cdk-virtual-scroll-viewport>

        <ng-template #nonVirtualScroll>
          <mat-option *ngFor="let option of selectOptions$ | async" [value]="option"
            (click)="$event.stopPropagation();$event.preventDefault()">
            <div class="flex-1 flex justify-start items-center">
              <button mat-icon-button [displayDensity]="displayDensity"
                [style.visibility]="!option.expandable ? 'hidden' : ''"
                [style.marginLeft.px]="option.level * treeNodePaddingIndent"
                (click)="$event.stopPropagation(); treeControl.toggle(option)">
                <mat-icon class="mat-icon-rtl-mirror">
                  {{treeControl.isExpanded(option) ? 'expand_more' : 'chevron_right'}}
                </mat-icon>
              </button>

              <mat-checkbox *ngIf="multiple" class="flex-1"
                [checked]="isSelected(option)"
                (click)="$event.stopPropagation()"
                (change)="onCheckboxSelect($event, option)"
              >
                <ngm-display-behaviour [option]="{value: option.key, label: option.label}"
                  [displayBehaviour]="displayBehaviour"
                  [highlight]="autoHighlight">
                </ngm-display-behaviour>
              </mat-checkbox>

              <ngm-display-behaviour *ngIf="!multiple" class="flex-1"
                [option]="{value: option.key, label: option.label}"
                [displayBehaviour]="displayBehaviour"
                [highlight]="autoHighlight">
              </ngm-display-behaviour>
            </div>

          </mat-option>
        </ng-template>
      </mat-autocomplete>
    } @else {

    <mat-select [formControl]="formControl" [compareWith]="compareWith" disableRipple
      [panelClass]="'ngm-tree-select__panel ' + (multiple ? 'multiple' : '') + ' ' + (displayDensity==='compact' ? 'ngm-density__compact' : '') + ' ' + (displayDensity==='cosy' ? 'ngm-density__cosy' : '')"
      [multiple]="multiple"
      [placeholder]="placeholder"
      (focus)="focus.emit($event)"
      (blur)="blur.emit($event)"
    >

      <mat-select-trigger class="flex items-center">
        <mat-checkbox *ngIf="multiple" class="mat-option-pseudo-checkbox" displayDensity="compact"
          [checked]="allSelect"
          [indeterminate]="someSelect()"
          (change)="setAll($event.checked)">
        </mat-checkbox>
        <button mat-icon-button displayDensity="compact"
          (click)="toggleExpand()">
          <mat-icon *ngIf="!unfold">unfold_more</mat-icon>
          <mat-icon *ngIf="unfold">unfold_less</mat-icon>
        </button>
        
        <span>
          {{ trigger$ | async }}
        </span>
      </mat-select-trigger>

      <div *ngIf="searchable()" class="mat-option mat-focus-indicator ngm-tree-select__option-toolbar flex justify-start items-center"
        [class.mat-option-multiple]="multiple"
        >
        <ngm-search class="flex-1 px-1" [displayDensity]="displayDensity"
          [formControl]="autoControl">
        </ngm-search>
      </div>

      <!-- mat-select 的 panel 中不好实现 virtual-scroll 功能
      <cdk-virtual-scroll-viewport *ngIf="virtualScroll; else nonVirtualScroll" [itemSize]="42" [style.height.px]=8*42 minBufferPx="200" maxBufferPx="400"
        class="ngm-tree-select__viewport">
      </cdk-virtual-scroll-viewport> -->

      <mat-option *ngFor="let option of selectOptions$ | async" [value]="option">
        <div class="flex-1 flex justify-start items-center">
          <button mat-icon-button [displayDensity]="displayDensity"
            [style.visibility]="!option.expandable ? 'hidden' : ''"
            [style.marginLeft.px]="option.level * treeNodePaddingIndent"
            (click)="$event.stopPropagation(); treeControl.toggle(option)">
            <mat-icon class="mat-icon-rtl-mirror">
              {{treeControl.isExpanded(option) ? 'expand_more' : 'chevron_right'}}
            </mat-icon>
          </button>

          <ngm-display-behaviour class="flex-1"
            [option]="{value: option.key, label: option.label}"
            [displayBehaviour]="displayBehaviour"
            [highlight]="autoHighlight"
          >
          </ngm-display-behaviour>
        </div>
      </mat-option>

      <!-- Selected options 展示由于是与正常的选项重复,会造成在多选情况下组件只显示前面的已选中, 后一个仍是未选中状态 -->
      <!-- 将 Selected Options 隐藏在选项列表的最后, 既可以在 Tree 没有展开的情况下让 Select 组件匹配到已选中值, 又不会对多选情况下造成对正常选项的选中阻拦. --> 
      <mat-option *ngFor="let option of selectedOptions$ | async" class="ngm-tree-select__selected-option" style="min-height: 0; height: 0; overflow: hidden;"
        [value]="option">
        <ngm-display-behaviour class="flex-1"
          [option]="{value: option.key, label: option.label}"
          [displayBehaviour]="displayBehaviour"
          [highlight]="autoHighlight"
        >
        </ngm-display-behaviour>
      </mat-option>
      
    </mat-select>
    }

    @if (useAutocomplete) {
      <div matPrefix class="flex justify-start items-center">

        <button mat-icon-button class="ngm-actionable-opacity" [displayDensity]="displayDensity"
          (click)="$event.stopPropagation();toggleExpand()">
          <mat-icon *ngIf="!unfold">unfold_more</mat-icon>
          <mat-icon *ngIf="unfold">unfold_less</mat-icon>
        </button>

        <mat-checkbox *ngIf="multiple" class="mat-option-pseudo-checkbox"
          [checked]="allSelect"
          [indeterminate]="someSelect()"
          (change)="setAll($event.checked)"></mat-checkbox>
      </div>
    }

    <div matSuffix class="flex justify-start items-center" >
      <button *ngIf="isNotInitial" class="ngm-actionable-opacity" mat-icon-button displayDensity="cosy" ngmAppearance="danger"
        [disabled]="disabled()"
        (click)="clear($event)">
        <mat-icon>close</mat-icon>
      </button>

      <ng-content select="[matSuffix]"></ng-content>
      
    </div>

    <mat-error *ngIf="formControl.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
} @else {
  <ngm-search *ngIf="searchable()" class="w-full shrink-0 p-2" [formControl]="autoControl"></ngm-search>

  <mat-tree class="selection ngm-tree-select__panel flex-1"
    [dataSource]="dataSource"
    [treeControl]="treeControl"
    [displayDensity]="displayDensity"
  >
    <!-- This is the tree node template for leaf nodes -->
    <mat-tree-node *matTreeNodeDef="let node" class="rounded-lg"
      matTreeNodePadding [matTreeNodePaddingIndent]="treeNodePaddingIndent"
      [ngClass]="isSelected(node) ? 'selected' : ''"
      [disabled]="disabled()"
      (click)="disabled() || toggleNode(node)">
      <!-- use a disabled button to provide padding for tree leaf -->
      <button mat-icon-button disabled [displayDensity]="displayDensity"></button>
      
      <ngm-display-behaviour class="flex-1" [option]="{value: node.key, label: node.label}"
        [displayBehaviour]="displayBehaviour"
        [highlight]="autoHighlight">
      </ngm-display-behaviour>
    </mat-tree-node>
    <!-- This is the tree node template for expandable nodes -->
    <mat-tree-node *matTreeNodeDef="let node;when: hasChild" class="rounded-lg"
      matTreeNodePadding [matTreeNodePaddingIndent]="treeNodePaddingIndent"
      [ngClass]="isSelected(node) ? 'selected' : ''"
      [disabled]="disabled()"
      (click)="disabled() || toggleNode(node)">
      <button mat-icon-button matTreeNodeToggle [displayDensity]="displayDensity"
              [attr.aria-label]="'Toggle ' + node.name">
        <mat-icon class="mat-icon-rtl-mirror">
          {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
        </mat-icon>
      </button>

      <ngm-display-behaviour class="flex-1" [option]="{value: node.key, label: node.label}"
        [displayBehaviour]="displayBehaviour"
        [highlight]="autoHighlight">
      </ngm-display-behaviour>
    </mat-tree-node>
  </mat-tree>
}