@if (isLookupTableSearch()) {
    <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
        <mat-label>{{ colCaption(field()) }}</mat-label>
        <input matInput [value]="isReadonly ? displayCaption : inputValue" [required]="required" readonly>
        <button matIconButton matSuffix type="button" (click)="openLookup()" [disabled]="isReadonly"
                [attr.aria-label]="'Look up ' + colCaption(field())">
            <mat-icon>search</mat-icon>
        </button>
    </mat-form-field>
} @else if (inputType === 'select' && isReadonly) {
    <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
        <mat-label>{{ colCaption(field()) }}</mat-label>
        <input matInput [value]="displayCaption" readonly>
    </mat-form-field>
} @else if (inputType === 'select') {
    <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
        <mat-label>{{ colCaption(field()) }}</mat-label>
        <mat-select [value]="value()" [required]="required" (selectionChange)="onSelectChange($event);">
            @for (option of options; track option.Value) {
                <mat-option [value]="option.Value">{{option.Caption}}</mat-option>
            }
        </mat-select>
    </mat-form-field>
} @else if (inputType === 'checkbox') {
    <mat-checkbox [checked]="value() === true || value() === '1'" (change)="onCheckboxChange($event);" [disabled]="isReadonly">{{ colCaption(field()) }}</mat-checkbox>
} @else if (isReadonly && isDateLike && !value()) {
    <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
        <mat-label>{{ colCaption(field()) }}</mat-label>
        <input matInput value="" readonly>
    </mat-form-field>
} @else if (isTextArea) {
    <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
        <mat-label>{{ colCaption(field()) }}</mat-label>
        <textarea matInput
         [value]="inputValue"
         (input)="onInputChange($event);"
         [disabled]="isReadonly"
         [required]="required"
         [attr.maxLength]="maxLength"
         [rows]="textAreaRows">
        </textarea>
    </mat-form-field>
} @else {
    <mat-form-field [appearance]="appearance()" [subscriptSizing]="subscriptSizing()">
        <mat-label>{{ colCaption(field()) }}</mat-label>
        <input matInput
         [type]="inputType"
         [value]="inputValue"
         (input)="onInputChange($event);"
         [disabled]="isReadonly"
         [required]="required"
         [attr.maxLength]="maxLength"
         [attr.step]="step">
    </mat-form-field>
}