<ng-container *ngIf="(field.inputSettings && field.inputSettings.inputType !== 'button' && (!field.definition || (field.inputSettings && field.inputSettings.inputType !== 'checkbox'))) && field.type !== 'text'">
            <label class="k-form-field" *ngIf="!!selected && field.type !== 'custom'">
                <span  #fieldLabel *ngIf="field.label && field.inputSettings.inputType !== 'checkbox'" [ngStyle]="getLabelStyle(fieldLabel)" >{{field.label}} <span *ngIf="field.definition && field.definition.mandatory" class="k-required">*</span></span>
                <ng-container [ngSwitch]="field.inputSettings.inputType">
                    <input 
                        smart-widget
                        #vTextField
                        [componentInstance]="vTextField"
                        *ngSwitchCase="'text'"
                        [name]="field.fieldName"
                        type="text" 
                        class="k-textbox" 
                        [ngModel]="model"
                        [enabledState]="field.enabledState" 
                        (ngModelChange)="updateValue($event)"
                        (focus)="helperService.inputFocused.next(field.fieldName)"
                        (blur)="helperService.inputBlurred.next(field.fieldName)"
                        [ngStyle]="contentStyle" />

                    <input 
                        smart-widget
                        #vPwdField
                        [componentInstance]="vPwdField"
                        *ngSwitchCase="'password'"
                        [name]="field.fieldName"
                        type="password" 
                        class="k-textbox" 
                        [ngModel]="model"
                        [enabledState]="field.enabledState" 
                        (ngModelChange)="updateValue($event)"
                        (focus)="helperService.inputFocused.next(field.fieldName)"
                        (blur)="helperService.inputBlurred.next(field.fieldName)"
                        [ngStyle]="contentStyle" />

                    <kendo-numerictextbox
                        smart-widget
                        #vNumberBox
                        [componentInstance]="vNumberBox"
                        [step]="(field.inputSettings && field.inputSettings.step) || 1"
                        *ngSwitchCase="'number'"
                        [format]="field.inputSettings && field.inputSettings.format"
                        [enabledState]="field.enabledState"
                        [name]="field.fieldName"
                        [ngStyle]="contentStyle"
                        [ngModel]="model"
                        (focus)="helperService.inputFocused.next(field.fieldName)"
                        (blur)="helperService.inputBlurred.next(field.fieldName)"
                        (ngModelChange)="updateValue($event)">
                    </kendo-numerictextbox>

                    <kendo-datepicker
                        smart-widget
                        #vDateField
                        [componentInstance]="vDateField"
                        [popupSettings]="{ appendTo: container }"
                        *ngSwitchCase="'date'"
                        [name]="field.fieldName"
                        [format]="field.inputSettings.format || 'yyyy-MM-dd'"
                        [enabledState]="field.enabledState"
                        [ngStyle]="contentStyle"
                        [value]="model"
                        (focus)="helperService.inputFocused.next(field.fieldName)"
                        (blur)="helperService.inputBlurred.next(field.fieldName)"
                        (valueChange)="updateValue($event)"
                        [weekNumber]="showDatePickerWeekNumbers">
                    </kendo-datepicker>
                            
                    <textarea
                        smart-widget
                        #vTextArea
                        [componentInstance]="vTextArea"
                        class="k-textbox smart-editor"
                        *ngSwitchCase="'editor'"
                        [name]="field.fieldName"
                        [enabledState]="field.enabledState"
                        [ngStyle]="contentStyle"
                        [ngModel]="model"
                        kendo-editor
                        (focus)="helperService.inputFocused.next(field.fieldName)"
                        (blur)="helperService.inputBlurred.next(field.fieldName)"
                        (ngModelChange)="updateValue($event)">
                    </textarea>

                    <smart-lookup
                        smart-widget
                        *ngSwitchCase="'lookup'"
                        #vLookupField
                        [componentInstance]="vLookupField"
                        [numeric]="isNumeric"
                        [name]="field.fieldName"
                        [enabledState]="field.enabledState"
                        [selected]="selected"
                        (blur)="helperService.inputBlurred.next(field.fieldName)"
                        (focus)="helperService.inputFocused.next(field.fieldName)"
                        [dataRequested]="field.inputSettings.lookupOptions.dataRequestedHandler"
                        [smart-partial-dataset]="field.inputSettings.lookupOptions.partialDataset"
                        [smart-lookup-key-value-field]="field.inputSettings.lookupOptions.keyValueField"
                        [smart-lookup-key-value-field-binding]="field.inputSettings.lookupOptions.keyValueFieldBinding"
                        [smart-lookup-header]="field.inputSettings.lookupOptions.dialogTitle"
                        [smart-lookup-key-field]="field.inputSettings.lookupOptions.keyField"
                        [smart-lookup-key-field-binding]="field.inputSettings.lookupOptions.keyFieldBinding"
                        [smart-entity-table]="field.inputSettings.lookupOptions.entityTable"
                        [smart-business-entity-name]="field.inputSettings.lookupOptions.entityName"
                        [smart-grid-layout]="field.inputSettings.lookupOptions.gridLayout"
                        [smart-lookup-fields]="field.inputSettings.lookupOptions.fields"
                        [smart-lookup-fields-binding]="field.inputSettings.lookupOptions.fieldBinding"
                        [smart-lookup-disable-autocomplete]="field.inputSettings.lookupOptions.disableAutocomplete"
                        [smart-server-side-filtering]="field.inputSettings.lookupOptions.serverSideFiltering"
                        [smart-server-side-sorting]="field.inputSettings.lookupOptions.serverSideSorting"
                        [ngStyle]="contentStyle"
                        [smart-lookup-dialog-options]="field.inputSettings.lookupOptions.dialogOptions"
                        [smartModel]="model"
                        [beforePerformLookup]="field.inputSettings.lookupOptions?.beforePerformLookup ? formInstanceService?.formInstance[field.inputSettings.lookupOptions.beforePerformLookup] : null"
                        [smart-filter]="field.inputSettings.lookupOptions.smartFilter"
                        (smartModelChange)="updateValue($event)"
                        (keyValueModelChange)="updateLookupKeyValue($event)"
                        [smart-foreign-fields]="field.inputSettings.lookupOptions.foreignFields"
                        [smart-query-string]="field.inputSettings.lookupOptions.queryString"
                        [provide-foreign-field-value]="field.inputSettings.lookupOptions.provideForeignFieldValue"
                        [smart-viewer-unbound-field]="field.inputSettings.unbound">
                    </smart-lookup>

                    <smart-combo-editor
                        *ngSwitchCase="'combo'"
                        smart-widget
                        [name]="field.fieldName"
                        [selected]="selected"
                        (blur)="helperService.inputBlurred.next(field.fieldName)"
                        (focus)="helperService.inputFocused.next(field.fieldName)"
                        #vCmbField
                        [componentInstance]="vCmbField"
                        [style]="contentStyle"
                        [smart-value-list]="field.inputSettings.comboOptions?.smartValueList || null"
                        [value-list-pair]="field.inputSettings.comboOptions?.valueListPair || null"
                        [value-list]="field.inputSettings.comboOptions?.valueList || null"
                        [smart-business-entity-name]="field.inputSettings.comboOptions?.entityName"
                        [smart-entity-table]="field.inputSettings.comboOptions?.tableRef"
                        [display-column-name]="field.inputSettings.comboOptions?.displayColumn"
                        [display-fields]="field.inputSettings.comboOptions?.displayFields"
                        [display-substitute]="field.inputSettings.comboOptions?.displaySubstitute"
                        [key-column-name]="field.inputSettings.comboOptions?.keyColumn"
                        [smart-field-binding]="field.inputSettings.comboOptions?.fieldBinding"
                        [smartModel]="model"
                        (smartModelChange)="updateValue($event)"
                        [smart-flag-value]="field.inputSettings.comboOptions?.flagValue === '' ? '' : (field.inputSettings.comboOptions?.flagValue || null)"
                        [smart-flag-label]="field.inputSettings.comboOptions?.flagLabel || null"
                        [smart-flag-image]="field.inputSettings.comboOptions?.flagImage || null"
                        [smart-foreign-fields]="field.inputSettings.comboOptions?.foreignFields"
                        [smart-query-string]="field.inputSettings.comboOptions?.queryString"
                        [provide-foreign-field-value]="field.inputSettings.comboOptions?.provideForeignFieldValue"
                        [smart-viewer-unbound-field]="field.inputSettings.unbound"
                        [smart-combo-allow-filter]="field.inputSettings.comboOptions?.allowFiltering">
                    </smart-combo-editor>

                    <smart-radio-set
                        *ngSwitchCase="'radio'"
                        [value-list]="field.inputSettings.valueList || null"
                        [smartModel]="model"
                        (smartModelChange)="updateValue($event)"
                        [orientation]="field.inputSettings.orientation"
                        [style]="contentStyle"
                    ></smart-radio-set>

                    <smart-logical-combo
                        smart-widget
                        *ngSwitchCase="'logical'"
                        [format]="field.inputSettings.format || 'yes/no'"
                        [mandatory]="field.inputSettings.mandatory || false"
                        [smartModel]="model"
                        (smartModelChange)="updateValue($event)"
                        (blur)="helperService.inputBlurred.next(field.fieldName)"
                        (focus)="helperService.inputFocused.next(field.fieldName)"
                        [name]="field.fieldName"
                        [enabledState]="field.enabledState"
                        #vLogicalCombo
                        [componentInstance]="vLogicalCombo"
                        >
                    </smart-logical-combo>

                    <img 
                        #vImg
                        smart-widget
                        *ngSwitchCase="'image'"
                        [src]="imageURL"
                        [ngStyle]="contentStyle"
                        [name]="field.fieldName"
                        [componentInstance]="vImg"
                    >
                </ng-container>
            </label>
        </ng-container>
        <ng-container *ngIf="!!selected && field.type === 'custom'">
            <!-- Template Placeholder -->
           <smart-form-template-renderer
               [config]="field">
           </smart-form-template-renderer>
       </ng-container>
       <label #label class="k-form-field smart-checkbox" *ngIf="field.inputSettings && field.inputSettings.inputType === 'checkbox'" [ngStyle]="getLabelStyle(label)" >
            <input 
            type="checkbox" 
            #vCheckbox
            [componentInstance]="vCheckbox"
            [checked]="model"
            (click)="updateValue(!model)"
            smart-widget 
            [enabledState]="field.enabledState"
            [name]="field.fieldName"
            (focus)="helperService.inputFocused.next(field.fieldName)"
            (blur)="helperService.inputBlurred.next(field.fieldName)"
            [ngStyle]="contentStyle">
            <label (click)="!vCheckbox.hasAttribute('disabled') && updateValue(!model)" [ngClass]="{ disabled: vCheckbox.hasAttribute('disabled') && (!vCheckbox.getAttribute('disabled') || vCheckbox.getAttribute('disabled')==='true')}">
                {{field.label}}
                <span *ngIf="mandatory" class="k-required">*</span></label>
        </label>
        <button
            kendoButton
            #vBtn
            [componentInstance]="vBtn"
            [name]="field.fieldName"
            [imageUrl]="buttonImageUrl"
            *ngIf="field.inputSettings && field.inputSettings.inputType === 'button'"
            type="button"
            smart-widget
            [enabledState]="field.enabledState"
            [ngStyle]="contentStyle"
            (click)="viewerButtonClicked()">
                {{field.label}}
        </button>   


        <ng-container *ngIf="field.type === 'text'">
            <label>&nbsp;</label>
            <p 
                class="smart-viewer-label">
                {{field.label}}
            </p>
        </ng-container>

./field.component.css

 ::ng-deep input[disabled],
::ng-deep textarea[disabled],
::ng-deep select[disabled],
::ng-deep [smart-widget-disabled],
::ng-deep span.k-numeric-wrap[smart-widget-disabled] {
    background-color: #eee !important;
}

::ng-deep .smart-editor {
    width: 100% !important;
}

::ng-deep .k-form-field.smart-checkbox {
    display: flex !important;
}

::ng-deep .k-form-field.smart-checkbox input {
    width: 20px !important;
}

::ng-deep kendo-autocomplete.k-state-disabled {
    padding-right: 0px !important;
}

::ng-deep .k-form-inline .k-form-field > span {
    width: auto !important;
}

::ng-deep .k-animation-container {
    z-index: 1000 !important;
}

::ng-deep .k-autocomplete {
    padding-right: 0px !important;
}

::ng-deep .smart-checkbox .disabled {
    pointer-events: none !important;
}