<div class="app-card-title mb-3">
  <anglo-title-component title="Input"></anglo-title-component> 
</div>
<div class="app-grid-wrapper">
	<div class="grid-wrapper" fxLayout="row wrap">
		<div class="app-card" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
			<mat-card>
				<div class="card-title p-2">
					<h3>{{'Normal with hint text'|translate}}</h3>
				</div>
				<div class="card-content p-2" fxLayout="row wrap" fxLayoutAlign="space-between center">
					<div class="title">
						<span class="grey-text small">Normal with hint text/label</span>
					</div>
					<div>	
						<form class="example-form">
							<mat-form-field>
								<input matInput placeholder="Label Text">
							</mat-form-field>
						</form>
					</div>	
				</div>
			</mat-card>
		</div>
		<div class="app-card" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
			<mat-card>
				<div class="card-title p-2">
					<h3>{{'Focus'|translate}}</h3>
				</div>
				<div class="card-content p-2" fxLayout="row wrap" fxLayoutAlign="space-between center">			
					<div class="title" >
						<span class="grey-text small">Focus</span>
					</div>
					<div>	
						<form class="example-form">
							<mat-form-field>
								<input matInput placeholder="Label Text" value="Input text">
							</mat-form-field>
						</form>
					</div>	
				</div>
			</mat-card>
		</div>
	</div>
	<div class="grid-wrapper" fxLayout="row wrap">	
		<div class="app-card" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
			<mat-card>
				<div class="card-title p-2">
					<h3>{{'Normal with input text'|translate}}</h3>
				</div>
				<div class="card-content p-2" fxLayout="row wrap" fxLayoutAlign="space-between center">	
					<div class="title mb-3">	
						<span class="grey-text small">Normal with input text + label</span>
					</div>
					<div>	
						<form class="example-form">
							<mat-form-field>
								<input matInput placeholder="Label Text" value="Input text">
							</mat-form-field>
						</form>
					</div>	
				</div>
			</mat-card>
		</div>
		<div class="app-card" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="50" fxFlex.lg="50" fxFlex.xl="50">
			<mat-card>
				<div class="card-title p-2">
					<h3>{{'Disabled'|translate}}</h3>
				</div>
				<div class="card-content p-2" fxLayout="row wrap" fxLayoutAlign="space-between center">		
					<div class="title">	
						<span class="grey-text small">Disabled</span>
					</div>
					<div>	
						<form class="example-form">
							<mat-form-field>
								<input matInput placeholder="Label Text" disabled value="Input text">
							</mat-form-field>
						</form>
					</div>	
				</div>
			</mat-card>	
		</div>
	</div>
</div>	

