[docs] updates all docs to use Angle Bracket syntax

tests/dummy/app/templates/addons.hbs

@@ -1,6 +1,6 @@
-{{page-toolbar pageTitle="Addons" isDemo=false}}
+<PageToolbar @pageTitle="Addons" @isDemo={{false}} />
 
-{{#paper-content class="md-padding"}}
+<PaperContent @class="md-padding">
   <div class="doc-content">
     <p>
       <code>ember-paper</code> does not include every component mentioned in the material design specifications.
@@ -14,28 +14,28 @@
       Note that addons are maintained by third-party developers and may not necessarily be kept up to date.
     </p>
 
-    {{#paper-card}}
-      {{#paper-toolbar}}
-        {{#paper-toolbar-tools}}
+    <PaperCard>
+      <PaperToolbar>
+        <PaperToolbarTools>
           <h2>Ember paper addons</h2>
-        {{/paper-toolbar-tools}}
-      {{/paper-toolbar}}
-      {{#paper-list}}
+        </PaperToolbarTools>
+      </PaperToolbar>
+      <PaperList>
 
-        {{#paper-subheader}}
+        <PaperSubheader>
           Material design components
-        {{/paper-subheader}}
+        </PaperSubheader>
 
-        {{#paper-item class="md-2-line"}}
+        <PaperItem @class="md-2-line">
           <div class="md-list-item-text">
             <h3><a target="_blank" rel="noopener" href="https://github.com/CoachLogix/ember-paper-stepper">ember-paper-stepper</a></h3>
             <p>
               Provides an implementation of <a target="_blank" rel="noopener" href="https://material.io/guidelines/components/steppers.html">material steppers</a>.
             </p>
           </div>
-        {{/paper-item}}
+        </PaperItem>
 
-        {{#paper-item class="md-2-line"}}
+        <PaperItem @class="md-2-line">
           <div class="md-list-item-text">
             <h3>
               <a target="_blank" rel="noopener" href="https://github.com/CoachLogix/ember-paper-selection-dialog">ember-paper-selection-dialog</a>
@@ -44,9 +44,9 @@
               Provides dialogs for selections. Think of it as a select component, but using dialogs.
             </p>
           </div>
-        {{/paper-item}}
+        </PaperItem>
 
-        {{#paper-item class="md-2-line"}}
+        <PaperItem @class="md-2-line">
           <div class="md-list-item-text">
             <h3><a target="_blank" rel="noopener" href="https://github.com/CoachLogix/ember-paper-swiper">ember-paper-swiper</a></h3>
             <p>
@@ -59,9 +59,9 @@
               </a>.
             </p>
           </div>
-        {{/paper-item}}
+        </PaperItem>
 
-        {{#paper-item class="md-2-line"}}
+        <PaperItem @class="md-2-line">
           <div class="md-list-item-text">
             <h3><a href="https://github.com/miguelcobain/ember-paper-expansion-panel">ember-paper-expansion-panel</a></h3>
             <p>
@@ -71,113 +71,113 @@
               </a>.
             </p>
           </div>
-        {{/paper-item}}
+        </PaperItem>
 
-        {{#paper-item class="md-2-line"}}
+        <PaperItem @class="md-2-line">
           <div class="md-list-item-text">
             <h3><a href="https://github.com/ibarrick/paper-data-table">paper-data-table</a></h3>
             <p>
               Provides an implementation of <a target="_blank" rel="noopener" href="https://material.io/guidelines/components/data-tables.html">material data tables</a>.
             </p>
           </div>
-        {{/paper-item}}
+        </PaperItem>
 
-        {{#paper-item class="md-2-line"}}
+        <PaperItem @class="md-2-line">
           <div class="md-list-item-text">
             <h3><a href="https://github.com/devotox/ember-paper-pikaday">ember-paper-pikaday</a></h3>
             <p>
               Ember Pikaday wrapped as a Paper Item
             </p>
           </div>
-        {{/paper-item}}
+        </PaperItem>
 
-        {{#paper-item class="md-2-line"}}
+        <PaperItem @class="md-2-line">
           <div class="md-list-item-text">
             <h3><a href="https://github.com/devotox/ember-paper-time-picker">ember-paper-time-picker</a></h3>
             <p>
               Time Picker attached to an input field that allows both keyboard and mouse entry
             </p>
           </div>
-        {{/paper-item}}
+        </PaperItem>
 
-        {{#paper-item class="md-2-line"}}
+        <PaperItem @class="md-2-line">
           <div class="md-list-item-text">
             <h3><a href="https://github.com/betocantu93/ember-paper-flatpickr">ember-paper-flatpickr</a></h3>
             <p>
               Flatpickr attached to a paper-input, it supports form validation and all the flatpickr.js.org options.
               it wraps <a href="https://github.com/shipshapecode/ember-flatpickr">ember-flatpickr </a>
             </p>
           </div>
-        {{/paper-item}}
+        </PaperItem>
 
-        {{#paper-item class="md-2-line"}}
+        <PaperItem @class="md-2-line">
           <div class="md-list-item-text">
             <h3><a href="https://github.com/devotox/ember-paper-password">ember-paper-password</a></h3>
             <p>
               Simple paper input field with type password with an eye icon on the right that when clicked toggles between showing the password and not
             </p>
           </div>
-        {{/paper-item}}
+        </PaperItem>
 
-        {{#paper-item class="md-2-line"}}
+        <PaperItem @class="md-2-line">
           <div class="md-list-item-text">
             <h3><a href="https://github.com/devotox/ember-paper-input-mask">ember-paper-input-mask</a></h3>
             <p>
               Simple paper input field that wraps around <a href="https://github.com/pzuraq/ember-inputmask">Ember Inputmask </a>
               Look to Input mask to see possible options along with Paper Input options
             </p>
           </div>
-        {{/paper-item}}
+        </PaperItem>
 
-        {{paper-divider}}
-        {{#paper-subheader}}
+        <PaperDivider />
+        <PaperSubheader>
           Components adding additional functionality
-        {{/paper-subheader}}
+        </PaperSubheader>
 
-        {{#paper-item class="md-2-line"}}
+        <PaperItem @class="md-2-line">
           <div class="md-list-item-text">
             <h3><a href="https://github.com/NLincoln/ember-paper-dual-slider">ember-paper-dual-slider</a></h3>
             <p>
               A slider component which supports <code>to</code> and <code>from</code> values.
             </p>
           </div>
-        {{/paper-item}}
+        </PaperItem>
 
-        {{#paper-item class="md-2-line"}}
+        <PaperItem @class="md-2-line">
           <div class="md-list-item-text">
             <h3><a href="https://github.com/Subtletree/ember-paper-link">ember-paper-link</a></h3>
             <p>
               A <code>link-to</code> component with <code>paper-button</code> styling that handles active route state and query params.
             </p>
           </div>
-        {{/paper-item}}
+        </PaperItem>
 
-        {{#paper-item class="md-2-line"}}
+        <PaperItem @class="md-2-line">
           <div class="md-list-item-text">
             <h3><a href="https://github.com/betocantu93/ember-paper-mobile-autocomplete">ember-paper-mobile-autocomplete</a></h3>
             <p>
               A component to enhance autocomplete experience in mobile, local filtering or remote, mimics a radio or checkbox, with UX close to Google Calendar mobile "invite people" to event dialog.
             </p>
           </div>
-        {{/paper-item}}
+        </PaperItem>
 
-        {{#paper-item class="md-2-line"}}
+        <PaperItem @class="md-2-line">
           <div class="md-list-item-text">
             <h3><a href="https://github.com/onechiporenko/ember-paper-modals-manager">ember-paper-modals-manager</a></h3>
             <p>
               Modals-manager with predefined modals like `alert`, `prompt`, `confirm` etc. Any modal window can be created using `paper-dialog` and processed in the page with `modals-manager`-service.
             </p>
           </div>
-        {{/paper-item}}
+        </PaperItem>
 
 
-      {{/paper-list}}
-    {{/paper-card}}
+      </PaperList>
+    </PaperCard>
 
     <h3>Contributing an addon</h3>
 
     <p>
       If you have an <code>ember-paper</code> specific component, service etc that you think would be usable by others, please feel free to create an ember addon, publish to npm then <a href="https://github.com/miguelcobain/ember-paper/pulls">submit a pull request</a> on GitHub for it to be included here.
     </p>
   </div>
-{{/paper-content}}
+</PaperContent>

tests/dummy/app/templates/application.hbs

@@ -1,72 +1,71 @@
-{{#paper-sidenav-container class="site-nav-container"}}
-  {{#paper-sidenav class="md-whiteframe-z2 site-sidenav" lockedOpen="gt-sm"
-    open=isSidenavOpen onToggle=(action (mut isSidenavOpen))}}
-    {{#paper-toolbar class="site-content-toolbar" tall=true}}
+<PaperSidenavContainer @class="site-nav-container">
+  <PaperSidenav @class="md-whiteframe-z2 site-sidenav" @lockedOpen="gt-sm" @open={{isSidenavOpen}} @onToggle={{action (mut isSidenavOpen)}}>
+    <PaperToolbar @class="site-content-toolbar" @tall={{true}}>
       <div class="logo layout-column layout-align-center-center">
         <img alt="ember" src="ember-logo-white.png">
         <div>paper</div>
       </div>
-    {{/paper-toolbar}}
+    </PaperToolbar>
 
-    {{#paper-content}}
+    <PaperContent>
 
-      {{#paper-list}}
-        {{#menu-item active=(is-active "index" currentRouteName) href=(href-to "index")}}Introduction{{/menu-item}}
+      <PaperList>
+        <MenuItem @active={{is-active "index" currentRouteName}} @href={{href-to "index"}}>Introduction</MenuItem>
 
-        {{#menu-item onClick=(action "toggleExpandedItem" "demos") expanded=demosExpanded canExpand=true}}Components{{/menu-item}}
+        <MenuItem @onClick={{action "toggleExpandedItem" "demos"}} @expanded={{demosExpanded}} @canExpand={{true}}>Components</MenuItem>
 
         <div class="submenu">
           {{#liquid-if demosExpanded}}
-            {{#submenu-item active=(is-active "demo.autocomplete" currentRouteName) href=(href-to "demo.autocomplete")}}Autocomplete{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.button" currentRouteName) href=(href-to "demo.button")}}Button{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.card" currentRouteName) href=(href-to "demo.card")}}Card{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.checkbox" currentRouteName) href=(href-to "demo.checkbox")}}Checkbox{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.chips" currentRouteName) href=(href-to "demo.chips")}}Chips{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.dialog" currentRouteName) href=(href-to "demo.dialog")}}Dialog{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.divider" currentRouteName) href=(href-to "demo.divider")}}Divider{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.grid-list" currentRouteName) href=(href-to "demo.grid-list")}}Grid List{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.icons" currentRouteName) href=(href-to "demo.icons")}}Icons{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.input" currentRouteName) href=(href-to "demo.input")}}Input{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.list" currentRouteName) href=(href-to "demo.list")}}List{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.menu" currentRouteName) href=(href-to "demo.menu")}}Menu{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.progress-circular" currentRouteName) href=(href-to "demo.progress-circular")}}Progress Circular{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.progress-linear" currentRouteName) href=(href-to "demo.progress-linear")}}Progress Linear{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.radio" currentRouteName) href=(href-to "demo.radio")}}Radio{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.select" currentRouteName) href=(href-to "demo.select")}}Select{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.sidenav" currentRouteName) href=(href-to "demo.sidenav")}}Sidenav{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.slider" currentRouteName) href=(href-to "demo.slider")}}Slider{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.speed-dial" currentRouteName) href=(href-to "demo.speed-dial")}}Speed Dial{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.switch" currentRouteName) href=(href-to "demo.switch")}}Switch{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.tabs.index" currentRouteName) href=(href-to "demo.tabs")}}Tabs{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.toast" currentRouteName) href=(href-to "demo.toast")}}Toast{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.toolbar" currentRouteName) href=(href-to "demo.toolbar")}}Toolbar{{/submenu-item}}
-            {{#submenu-item active=(is-active "demo.tooltip" currentRouteName) href=(href-to "demo.tooltip")}}Tooltip{{/submenu-item}}
+            <SubmenuItem @active={{is-active "demo.autocomplete" currentRouteName}} @href={{href-to "demo.autocomplete"}}>Autocomplete</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.button" currentRouteName}} @href={{href-to "demo.button"}}>Button</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.card" currentRouteName}} @href={{href-to "demo.card"}}>Card</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.checkbox" currentRouteName}} @href={{href-to "demo.checkbox"}}>Checkbox</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.chips" currentRouteName}} @href={{href-to "demo.chips"}}>Chips</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.dialog" currentRouteName}} @href={{href-to "demo.dialog"}}>Dialog</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.divider" currentRouteName}} @href={{href-to "demo.divider"}}>Divider</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.grid-list" currentRouteName}} @href={{href-to "demo.grid-list"}}>Grid List</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.icons" currentRouteName}} @href={{href-to "demo.icons"}}>Icons</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.input" currentRouteName}} @href={{href-to "demo.input"}}>Input</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.list" currentRouteName}} @href={{href-to "demo.list"}}>List</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.menu" currentRouteName}} @href={{href-to "demo.menu"}}>Menu</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.progress-circular" currentRouteName}} @href={{href-to "demo.progress-circular"}}>Progress Circular</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.progress-linear" currentRouteName}} @href={{href-to "demo.progress-linear"}}>Progress Linear</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.radio" currentRouteName}} @href={{href-to "demo.radio"}}>Radio</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.select" currentRouteName}} @href={{href-to "demo.select"}}>Select</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.sidenav" currentRouteName}} @href={{href-to "demo.sidenav"}}>Sidenav</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.slider" currentRouteName}} @href={{href-to "demo.slider"}}>Slider</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.speed-dial" currentRouteName}} @href={{href-to "demo.speed-dial"}}>Speed Dial</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.switch" currentRouteName}} @href={{href-to "demo.switch"}}>Switch</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.tabs.index" currentRouteName}} @href={{href-to "demo.tabs"}}>Tabs</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.toast" currentRouteName}} @href={{href-to "demo.toast"}}>Toast</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.toolbar" currentRouteName}} @href={{href-to "demo.toolbar"}}>Toolbar</SubmenuItem>
+            <SubmenuItem @active={{is-active "demo.tooltip" currentRouteName}} @href={{href-to "demo.tooltip"}}>Tooltip</SubmenuItem>
           {{/liquid-if}}
         </div>
-        {{#menu-item active=(is-active "forms" currentRouteName) href=(href-to "forms")}}Forms{{/menu-item}}
-        {{#menu-item active=(is-active "typography" currentRouteName) href=(href-to "typography")}}Typography{{/menu-item}}
-        {{#menu-item active=(is-active "theme" currentRouteName) href=(href-to "theme")}}Color & Theme{{/menu-item}}
+        <MenuItem @active={{is-active "forms" currentRouteName}} @href={{href-to "forms"}}>Forms</MenuItem>
+        <MenuItem @active={{is-active "typography" currentRouteName}} @href={{href-to "typography"}}>Typography</MenuItem>
+        <MenuItem @active={{is-active "theme" currentRouteName}} @href={{href-to "theme"}}>Color & Theme</MenuItem>
 
-        {{#menu-item onClick=(action "toggleExpandedItem" "layout") expanded=layoutExpanded canExpand=true}}Layout{{/menu-item}}
+        <MenuItem @onClick={{action "toggleExpandedItem" "layout"}} @expanded={{layoutExpanded}} @canExpand={{true}}>Layout</MenuItem>
         <div class="submenu">
           {{#liquid-if layoutExpanded}}
-            {{#submenu-item active=(is-active "layout.introduction" currentRouteName) href=(href-to "layout.introduction")}}Introduction{{/submenu-item}}
-            {{#submenu-item active=(is-active "layout.layout-containers" currentRouteName) href=(href-to "layout.layout-containers")}}Layout Containers{{/submenu-item}}
-            {{#submenu-item active=(is-active "layout.layout-children" currentRouteName) href=(href-to "layout.layout-children")}}Layout Children{{/submenu-item}}
-            {{#submenu-item active=(is-active "layout.child-alignment" currentRouteName) href=(href-to "layout.child-alignment")}}Child Alignment{{/submenu-item}}
+            <SubmenuItem @active={{is-active "layout.introduction" currentRouteName}} @href={{href-to "layout.introduction"}}>Introduction</SubmenuItem>
+            <SubmenuItem @active={{is-active "layout.layout-containers" currentRouteName}} @href={{href-to "layout.layout-containers"}}>Layout Containers</SubmenuItem>
+            <SubmenuItem @active={{is-active "layout.layout-children" currentRouteName}} @href={{href-to "layout.layout-children"}}>Layout Children</SubmenuItem>
+            <SubmenuItem @active={{is-active "layout.child-alignment" currentRouteName}} @href={{href-to "layout.child-alignment"}}>Child Alignment</SubmenuItem>
           {{/liquid-if}}
         </div>
 
-        {{#menu-item active=(is-active "cookbook" currentRouteName) href=(href-to "cookbook")}}Cookbook{{/menu-item}}
-        {{#menu-item active=(is-active "addons" currentRouteName) href=(href-to "addons")}}Addons{{/menu-item}}
-      {{/paper-list}}
+        <MenuItem @active={{is-active "cookbook" currentRouteName}} @href={{href-to "cookbook"}}>Cookbook</MenuItem>
+        <MenuItem @active={{is-active "addons" currentRouteName}} @href={{href-to "addons"}}>Addons</MenuItem>
+      </PaperList>
 
-    {{/paper-content}}
-  {{/paper-sidenav}}
+    </PaperContent>
+  </PaperSidenav>
 
   <div id="main" class="flex layout-column" tabindex="-1" role="main">
     {{outlet}}
   </div>
-{{/paper-sidenav-container}}
+</PaperSidenavContainer>
 
-{{paper-toaster parent="#main"}}
+<PaperToaster @parent="#main" />

tests/dummy/app/templates/components/doc-content.hbs

@@ -1,5 +1,5 @@
-{{#paper-content class="md-padding"}}
+<PaperContent @class="md-padding">
   <div class="doc-content {{class}}">
     {{yield}}
   </div>
-{{/paper-content}}
+</PaperContent>

tests/dummy/app/templates/components/example-item.hbs

@@ -2,6 +2,6 @@
 {{! app/templates/components/example-item.hbs }}
 <span class="item-title">
   {{paper-icon "star"}}
-  <span>{{paper-autocomplete-highlight searchText=searchText label=item}} (index {{index}} )</span>
+  <span><PaperAutocompleteHighlight @searchText={{searchText}} @label={{item}} /> (index {{index}} )</span>
 </span>
 {{! END-SNIPPET }}