chore: add outline mdc-form-field with autocomplete to demo

Author: devversion

src/dev-app/mdc-input/mdc-input-demo.html

@@ -637,11 +637,20 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
 <mat-card class="demo-card demo-basic">
   <mat-toolbar color="primary">Autocomplete</mat-toolbar>
   <mat-card-content>
-    <mat-form-field>
+    <mat-form-field class="demo-block">
+      <mat-label>Pick Number</mat-label>
+      <input type="text" aria-label="Number" matInput
+             [matAutocomplete]="autoComplete1">
+      <mat-autocomplete #autoComplete1="matAutocomplete">
+        <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
+      </mat-autocomplete>
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="demo-block">
       <mat-label>Pick Number</mat-label>
       <input type="text" aria-label="Number" matInput
-             [matAutocomplete]="auto">
-      <mat-autocomplete #auto="matAutocomplete">
+             [matAutocomplete]="autoComplete2">
+      <mat-autocomplete #autoComplete2="matAutocomplete">
         <mat-option *ngFor="let option of options" [value]="option">{{option}}</mat-option>
       </mat-autocomplete>
     </mat-form-field>

src/dev-app/mdc-input/mdc-input-demo.scss

@@ -16,6 +16,10 @@
   width: 100%;
 }
 
+.demo-block {
+  display: block;
+}
+
 .demo-card {
   margin: 16px;