ipsos-components/src/lib/form-field/form-field.html

Material Design components for Angular

<div class="mat-input-wrapper mat-form-field-wrapper">
  <div class="mat-input-flex mat-form-field-flex" #connectionContainer
       (click)="_control.onContainerClick && _control.onContainerClick($event)">
    <div class="mat-input-prefix mat-form-field-prefix" *ngIf="_prefixChildren.length">
      <ng-content select="[matPrefix]"></ng-content>
    </div>

    <div class="mat-input-infix mat-form-field-infix" #inputContainer>
      <ng-content></ng-content>

      <!--
        TODO: remove `mat-input-placeholder-wrapper` and `mat-form-field-placeholder-wrapper`
        next time we do breaking changes.
      -->
      <span class="mat-form-field-label-wrapper mat-input-placeholder-wrapper mat-form-field-placeholder-wrapper">
        <!-- We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't
             read if it comes before the control in the DOM. -->

        <!--
          TODO: remove `mat-input-placeholder` and `mat-form-field-placeholder`
          next time we do breaking changes.
        -->
        <label class="mat-form-field-label mat-input-placeholder mat-form-field-placeholder"
               [attr.for]="_control.id"
               [attr.aria-owns]="_control.id"
               [class.mat-empty]="_control.empty && !_shouldAlwaysFloat"
               [class.mat-form-field-empty]="_control.empty && !_shouldAlwaysFloat"
               [class.mat-accent]="color == 'accent'"
               [class.mat-warn]="color == 'warn'"
               #label
               *ngIf="_hasFloatingLabel()"
               [ngSwitch]="_hasLabel()">

          <ng-container *ngSwitchCase="false">
            <ng-content select="mat-placeholder"></ng-content>
            {{_control.placeholder}}
          </ng-container>

          <ng-content select="mat-label" *ngSwitchCase="true"></ng-content>

          <span
            class="mat-placeholder-required mat-form-field-required-marker"
            aria-hidden="true"
            *ngIf="!hideRequiredMarker && _control.required">&nbsp;*</span>
        </label>
      </span>
    </div>

    <div class="mat-input-suffix mat-form-field-suffix" *ngIf="_suffixChildren.length">
      <ng-content select="[matSuffix]"></ng-content>
    </div>
  </div>

  <div class="mat-input-underline mat-form-field-underline" #underline>
    <span class="mat-input-ripple mat-form-field-ripple"
          [class.mat-accent]="color == 'accent'"
          [class.mat-warn]="color == 'warn'"></span>
  </div>

  <div class="mat-input-subscript-wrapper mat-form-field-subscript-wrapper"
       [ngSwitch]="_getDisplayedMessages()">
    <div *ngSwitchCase="'error'" [@transitionMessages]="_subscriptAnimationState">
      <ng-content select="mat-error"></ng-content>
    </div>

    <div class="mat-input-hint-wrapper mat-form-field-hint-wrapper" *ngSwitchCase="'hint'"
      [@transitionMessages]="_subscriptAnimationState">
      <!-- TODO(mmalerba): use an actual <mat-hint> once all selectors are switched to mat-* -->
      <div *ngIf="hintLabel" [id]="_hintLabelId" class="mat-hint">{{hintLabel}}</div>
      <ng-content select="mat-hint:not([align='end'])"></ng-content>
      <div class="mat-input-hint-spacer mat-form-field-hint-spacer"></div>
      <ng-content select="mat-hint[align='end']"></ng-content>
    </div>
  </div>
</div>