Expose OnFocus event on MatButton. Closes #314

- implementation change
- example code update

Thanks!

Author: peterblazejewicz

src/MatBlazor.Demo/Demo/DemoMatButton.razor

@@ -9,7 +9,7 @@
         @using Microsoft.AspNetCore.Components
 
         <h4 class="mat-subtitle1">Simple use</h4>
-        <MatButton Icon="favorite" OnClick="@RunOnClick" Label="Simple Button"></MatButton>
+        <MatButton Icon="favorite" OnClick="@RunOnClick" Label="Simple Button" OnFocus="@RunOnFocus"></MatButton>
 
         <h5 class="mat-subtitle1">With Font-Awsome Icons and Link</h5>
         <MatButton Link="https://github.com/BlazorComponents/MatBlazor">
@@ -24,6 +24,11 @@
                 JsRuntime.InvokeAsync<object>("window.alert", "Test");
             }
 
+            public void RunOnFocus(FocusEventArgs e)
+            {
+                Console.WriteLine(e.Type);
+            }
+
         }
 
     </Content>
@@ -32,7 +37,7 @@
         @using Microsoft.AspNetCore.Components
 
         <h4 class=""mat-subtitle1"">Simple use</h4>
-        <MatButton Icon=""favorite"" OnClick=""@RunOnClick"" Label=""Simple Button""></MatButton>
+        <MatButton Icon=""favorite"" OnClick=""@RunOnClick"" OnFocus=""@RunOnFocus"" Label=""Simple Button""></MatButton>
 
         <h5 class=""mat-subtitle1"">With Font-Awsome Icons and Link</h5>
         <MatButton Link=""https://github.com/BlazorComponents/MatBlazor"">
@@ -47,6 +52,11 @@
                 JsRuntime.InvokeAsync<object>(""window.alert"", ""Test"");
             }
 
+            public void RunOnFocus(FocusEventArgs e)
+            {
+                Console.WriteLine(e.Type);
+            }
+
         }
 
     ")></BlazorFiddle>

src/MatBlazor.Demo/Doc/DocMatButton.razor

@@ -79,6 +79,11 @@
 		<td>EventCallback&lt;MouseEventArgs&gt;</td>
 		<td>Event occurs when the user clicks on an element.</td>
 	</tr>
+     <tr>
+         <td>OnFocus</td>
+         <td>EventCallback&lt;FocusEventArgs&gt;</td>
+         <td>Event occurs when the user focuses on an element.</td>
+     </tr>
 	<tr>
 		<td>Outlined</td>
 		<td>Boolean</td>

src/MatBlazor/Components/MatButton/BaseMatButton.cs

@@ -37,6 +37,12 @@ public BaseMatButton()
         [Parameter]
         public EventCallback<MouseEventArgs> OnClick { get; set; }
 
+        /// <summary>
+        /// Event occurs when the user focuses on an element
+        /// </summary>
+        [Parameter]
+        public EventCallback<FocusEventArgs> OnFocus { get; set; }
+
         /// <summary>
         ///  Command executed when the user clicks on an element.
         /// </summary>
@@ -191,6 +197,15 @@ protected void OnClickHandler(MouseEventArgs ev)
             }
         }
 
+        /// <summary>
+        /// Event handler for focus event
+        /// </summary>
+        /// <param name="ev"></param>
+        protected void OnFocusHandler(FocusEventArgs ev)
+        {
+            OnFocus.InvokeAsync(ev);
+        }
+
         private bool _raised;
         private bool _unelevated;
         private bool _outlined;

src/MatBlazor/Components/MatButton/MatButton.razor

@@ -1,7 +1,7 @@
 @namespace MatBlazor
 @inherits BaseMatButton
 
-<button class="@ClassMapper.Class" style="@Style" @onclick="OnClickHandler" disabled=@Disabled aria-label="@(Label ?? Icon)" @ref="Ref"  type="@Type" name="@Name" value="@Value" @attributes="Attributes" Id="@Id">
+<button class="@ClassMapper.Class" style="@Style" @onclick="OnClickHandler" @onfocus="OnFocusHandler" disabled=@Disabled aria-label="@(Label ?? Icon)" @ref="Ref"  type="@Type" name="@Name" value="@Value" @attributes="Attributes" Id="@Id">
     @if (Icon != null)
     {
         <span class="material-icons mdc-button__icon">@Icon</span>