<h2>Demo</h2>
<p>
    This demo shows some of the uses for the components
    in this library.  The descriptions here aren't meant
    to be comprehensive but just show off some of the 
    features the components make use of.
</p>
<h2>Hamburger Menu Nav Bar</h2>
<p>
    The nav bar to this demo is the UATHamburgerMenu.  
    It is set to expand with the input 
    expandOnQuery="(min-width : 844px)".
</p>
<p>
    The Home link is fixed content so it does not 
    collapse when the rest of the menu does.
</p>
<p>
    The Menu item is just to show that arbitrary components
    can be added to the nav bar as desired.
</p>
<p>
    The Item D and Item E items are just &lt;a&gt; elements but  
    are used to show that content can also be right justified. 
</p>
<p>
    When collapsed the hamburger menu uses the content
    defined by the uat-menu-toggle directive.
</p>
<h2>Dropdown Input</h2>
<p>
    The UATDropdownInput component is injected with a service
    that implements the DropdownInputService interface.  This
    service is responsible for providing the data necessary to
    create the dynamic components that populate the drop down.
    It also accepts the input and decides how to modify the 
    the search results provided to the component.  Here the 
    demo is just creating links to other parts of the demo.
</p>
<p>
    The search box here matches on exact text as defined by
    the items returned from the service.  Other selection modes
    can be set like partial match but this one only auto selects
    the item in the drop down if the text typed matches exactly
    with the search text defined in the model for the item the
    service returns.  For instance type 'collapsing' and the link
    to the collapsing menu route will be automatically pre selected
    in the dropdown box.
</p>
<label>Pages: </label>
<div uat-dropdown-input
     placeholderText="Search..."
     autoSelectionMode="exact"
     (listItemChosen)="onSearchItemChosen($event)">
</div>