ipsos-components/src/lib/select/select.html

Material Design components for Angular

<div cdk-overlay-origin
     class="mat-select-trigger"
     aria-hidden="true"
     (click)="toggle()"
     #origin="cdkOverlayOrigin"
     #trigger>
  <div class="mat-select-value" [ngSwitch]="empty">
    <span class="mat-select-placeholder" *ngSwitchCase="true">{{placeholder || '\u00A0'}}</span>
    <span class="mat-select-value-text" *ngSwitchCase="false" [ngSwitch]="!!customTrigger">
      <span *ngSwitchDefault>{{triggerValue}}</span>
      <ng-content select="mat-select-trigger" *ngSwitchCase="true"></ng-content>
    </span>
  </div>

  <div class="mat-select-arrow-wrapper"><div class="mat-select-arrow"></div></div>
</div>

<ng-template
  cdk-connected-overlay
  hasBackdrop
  backdropClass="cdk-overlay-transparent-backdrop"
  [scrollStrategy]="_scrollStrategy"
  [origin]="origin"
  [open]="panelOpen"
  [positions]="_positions"
  [minWidth]="_triggerRect?.width"
  [offsetY]="_offsetY"
  (backdropClick)="close()"
  (attach)="_onAttached()"
  (detach)="close()">

  <div
    #panel
    class="mat-select-panel {{ _getPanelTheme() }}"
    [ngClass]="panelClass"
    [@transformPanel]="multiple ? 'showing-multiple' : 'showing'"
    (@transformPanel.done)="_onPanelDone()"
    [style.transformOrigin]="_transformOrigin"
    [class.mat-select-panel-done-animating]="_panelDoneAnimating"
    [style.font-size.px]="_triggerFontSize">

    <div
      class="mat-select-content"
      [@fadeInContent]="'showing'"
      (@fadeInContent.done)="_onFadeInDone()">
      <ng-content></ng-content>
    </div>
  </div>
</ng-template>