chore: updates documentation to use angle-bracket invocation.

addon/components/paper-checkbox.js

@@ -55,7 +55,7 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, {
   init() {
     this._super(...arguments);
     assert(
-      '{{paper-checkbox}} requires an `onChange` action or null for no action.',
+      '<PaperCheckbox /> requires an `onChange` action or null for no action.',
       this.onChange !== undefined
     );
   },

addon/components/paper-chips/template.hbs

@@ -30,7 +30,7 @@
               aria-hidden="true"
               tabindex="-1"
               {{on "click" (fn this.handleRemoveItem item)}}>
-              <PaperIcon @icon="clear" @size={{18}}/>
+              <PaperIcon @icon="clear" @size={{18}} />
               <span class="md-visually-hidden">Remove</span>
             </button>
           {{/unless}}

addon/components/paper-input.js

@@ -92,7 +92,7 @@ export default Component.extend(
     didReceiveAttrs() {
       this._super(...arguments);
       assert(
-        '{{paper-input}} requires an `onChange` action or null for no action.',
+        '<PaperInput /> requires an `onChange` action or null for no action.',
         this.onChange !== undefined
       );
 

addon/components/paper-radio-base.js

@@ -37,7 +37,7 @@ export default Component.extend(FocusableMixin, ColorMixin, {
   // Lifecycle hooks
   init() {
     assert(
-      '{{paper-radio}} requires an `onChange` action or null for no action.',
+      '<PaperRadio /> requires an `onChange` action or null for no action.',
       this.onChange !== undefined
     );
     this._super(...arguments);

addon/components/paper-radio-group.js

@@ -34,7 +34,7 @@ export default Component.extend(FocusableMixin, ParentMixin, {
   init() {
     this._super(...arguments);
     assert(
-      '{{paper-radio-group}} requires an `onChange` action or null for no action',
+      '<PaperRadioGroup /> requires an `onChange` action or null for no action',
       this.onChange !== undefined
     );
   },

addon/components/paper-switch.js

@@ -57,7 +57,7 @@ export default Component.extend(FocusableMixin, ColorMixin, ProxiableMixin, {
   init() {
     this._super(...arguments);
     assert(
-      '{{paper-switch}} requires an `onChange` action or null for no action.',
+      '<PaperSwitch /> requires an `onChange` action or null for no action.',
       this.onChange !== undefined
     );
   },

addon/components/paper-tabs.hbs

@@ -3,10 +3,10 @@
 
   {{#if shouldPaginate}}
     <md-prev-button role="button" class={{unless canPageBack "md-disabled"}} onclick={{action "previousPage"}}>
-      {{paper-icon "keyboard-arrow-left"}}
+      <PaperIcon @icon=keyboard-arrow-left />
     </md-prev-button>
     <md-next-button role="button" class={{unless canPageForward "md-disabled"}} onclick={{action "nextPage"}}>
-      {{paper-icon "keyboard-arrow-left"}}
+      <PaperIcon @icon="keyboard-arrow-left" />
     </md-next-button>
   {{/if}}
 

tests/dummy/app/templates/addons.hbs

@@ -148,7 +148,7 @@
           <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.
+              A <code>{{"<LinkTo>"}}</code> component with <code>{{"<PaperButton>"}}</code> styling that handles active route state and query params.
             </p>
           </div>
         </PaperItem>

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

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

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

@@ -2,6 +2,6 @@
 <PaperItem @onClick={{onClick}} @href={{href}} @class={{concat "menu-item" (if active " active") (if expanded " expanded")}}>
   {{yield}}
   {{#if canExpand}}
-    {{paper-icon "expand-more" class="expand-icon"}}
+    <PaperIcon @icon="expand-more" @class="expand-icon" />
   {{/if}}
 </PaperItem>

tests/dummy/app/templates/components/page-toolbar.hbs

@@ -3,19 +3,19 @@
   <toolbar.tools>
     <PaperSidenavToggle as |toggleAction|>
       <PaperButton @class="hide-gt-sm" @onClick={{action toggleAction}} @iconButton={{true}}>
-        {{paper-icon "menu"}}
+        <PaperIcon @icon="menu" />
       </PaperButton>
     </PaperSidenavToggle>
     <div class="layout-row flex">
       <h2>
         {{#if isDemo}}
-          Components {{paper-icon "chevron-right"}}
+          Components <PaperIcon @icon="chevron-right" />
         {{else if isLayout}}
-          Layout {{paper-icon "chevron-right"}}
+          Layout <PaperIcon @icon="chevron-right" />
         {{/if}}
         {{pageTitle}}
         {{#if isWIP}}
-          {{paper-icon "warning" title="Not updated yet."}}
+          <PaperIcon @icon="warning" @title="Not updated yet." />
         {{/if}}
       </h2>
 

tests/dummy/app/templates/cookbook.hbs

@@ -2,7 +2,7 @@
 
 <PaperContent @class="md-padding">
   <div class="doc-content">
-    <h3>Hiding the <code>\{{paper-input}}</code> character counts</h3>
+    <h3>Hiding the <code>{{"<PaperInput>"}}</code> character counts</h3>
     <p>
       Material Design <a href="https://material.google.com/components/text-fields.html#text-fields-character-counter">requires that a character count is displayed</a> for input elements which have a length restriction. However, when forms have many input elements, some may prefer to display the count only when the element is focused or invalid. This CSS achieves this.
     </p>

tests/dummy/app/templates/demo/autocomplete.hbs

@@ -6,7 +6,7 @@
   <PaperCard>
     <PaperCardContent>
       <h2>Basic Usage</h2>
-      <blockquote>Use <code>\{{paper-autocomplete}}</code> to search for matches from local or remote data sources.</blockquote>
+      <blockquote>Use <code>{{"<PaperAutocomplete>"}}</code> to search for matches from local or remote data sources.</blockquote>
       <form>
         {{! BEGIN-SNIPPET autocomplete.basic-usage }}
         <PaperAutocomplete @disabled={{firstDisabled}} @onCreate={{action "addCountry"}} @options={{items}} @allowClear={{true}} @defaultHighlighted={{if enableDefaultHighlighted highlightFirstMatch}} @searchText={{readonly countrySearchText}} @onSearchTextChange={{action (mut countrySearchText)}} @selected={{selectedCountry}} @search={{if simulateQuery (action "searchCountries")}} @searchField="name" @labelPath="name" @placeholder="Select a Country..." @noMatchesMessage="Oops this country doesn't exist. Create a new country?" @onSelectionChange={{action (mut selectedCountry)}} />
@@ -47,27 +47,25 @@
   <PaperCard>
     <PaperCardContent>
       <h2>Block Custom template</h2>
-      <blockquote>Use <code>\{{paper-autocomplete}}</code> with custom templates to show styled autocomplete results.</blockquote>
+      <blockquote>Use <code>{{"<PaperAutocomplete>"}}</code> with custom templates to show styled autocomplete results.</blockquote>
 
       {{!-- searchText=(readonly templateSeachText) --}}
 
       <form>
         {{! BEGIN-SNIPPET autocomplete.block-custom-template }}
-        {{#paper-autocomplete
-          placeholder="Type e.g. ember, paper, one, two etc."
-          options=arrayOfItems
-          selected=selectedItem
-          onSelectionChange=(action (mut selectedItem))
-          as |item term|}}
+        <PaperAutocomplete
+          @placeholder="Type e.g. ember, paper, one, two etc."
+          @options={{arrayOfItems}}
+          @selected={{selectedItem}}
+          @onSelectionChange={{action (mut selectedItem)}}
+        as |item term|>
           <span class="item-title">
-            {{paper-icon "star"}}
+            <PaperIcon @icon="star" />
             <span>
               <PaperAutocompleteHighlight @searchText={{term.searchText}} @flags="i" @label={{item}} />
             </span>
           </span>
-        {{else}}
-          Whoops! could not find!
-        {{/paper-autocomplete}}
+        </PaperAutocomplete>
         {{! END-SNIPPET }}
       </form>
 

tests/dummy/app/templates/demo/button.hbs

@@ -31,7 +31,7 @@
     <PaperButton @raised={{true}} @fab={{true}} @accent={{true}}>Fab</PaperButton>
     <PaperButton @raised={{true}} @mini={{true}}>Mini</PaperButton>
     <PaperButton @raised={{true}} @mini={{true}} @primary={{true}}>Mini</PaperButton>
-    <PaperButton @iconButton={{true}}>{{paper-icon "accessibility"}}</PaperButton>
+    <PaperButton @iconButton={{true}}><PaperIcon @icon="accessibility" /></PaperButton>
   </p>
 
   <p>

tests/dummy/app/templates/demo/card.hbs

@@ -31,9 +31,9 @@
             <div class="card-media"></div>
           </card.media>
           <card.actions @class="layout-column">
-            <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
-            <PaperButton @iconButton={{true}}>{{paper-icon "settings"}}</PaperButton>
-            <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
+            <PaperButton @iconButton={{true}}><PaperIcon @icon="favorite" /></PaperButton>
+            <PaperButton @iconButton={{true}}><PaperIcon @icon="settings" /></PaperButton>
+            <PaperButton @iconButton={{true}}><PaperIcon @icon="share" /></PaperButton>
           </card.actions>
         </card.content>
       </PaperCard>
@@ -141,18 +141,18 @@
           </p>
         </card.content>
         <card.actions>
-          <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
-          <PaperButton @iconButton={{true}}>{{paper-icon "settings"}}</PaperButton>
-          <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
+          <PaperButton @iconButton={{true}}><PaperIcon @icon="favorite" /></PaperButton>
+          <PaperButton @iconButton={{true}}><PaperIcon @icon="settings" /></PaperButton>
+          <PaperButton @iconButton={{true}}><PaperIcon @icon="share" /></PaperButton>
         </card.actions>
       </PaperCard>
 
       <PaperCard as |card|>
         <card.image @src="washedout.png" @alt="Washed Out" @title="Washed Out" />
         <card.actions>
-          <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
-          <PaperButton @iconButton={{true}}>{{paper-icon "settings"}}</PaperButton>
-          <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
+          <PaperButton @iconButton={{true}}><PaperIcon @icon="favorite" /></PaperButton>
+          <PaperButton @iconButton={{true}}><PaperIcon @icon="settings" /></PaperButton>
+          <PaperButton @iconButton={{true}}><PaperIcon @icon="share" /></PaperButton>
         </card.actions>
       </PaperCard>
 
@@ -199,8 +199,8 @@
         </card.title>
         <card.actions @class="layout-row layout-align-start-center" as |actions|>
           <actions.icons>
-            <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
-            <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
+            <PaperButton @iconButton={{true}}><PaperIcon @icon="favorite" /></PaperButton>
+            <PaperButton @iconButton={{true}}><PaperIcon @icon="share" /></PaperButton>
           </actions.icons>
           <PaperButton>Action 1</PaperButton>
           <PaperButton>Action 2</PaperButton>
@@ -234,7 +234,7 @@
           <PaperButton>Action 1</PaperButton>
           <PaperButton>Action 2</PaperButton>
           <actions.icons>
-            <PaperButton @iconButton={{true}}>{{paper-icon "expand-less"}}</PaperButton>
+            <PaperButton @iconButton={{true}}><PaperIcon @icon="expand-less" /></PaperButton>
           </actions.icons>
         </card.actions>
         <card.content>

tests/dummy/app/templates/demo/chips.hbs

@@ -52,7 +52,7 @@
       <PaperContactChips @readOnly={{readOnly}} @removeItem={{action "removeContact"}} @addItem={{action "addContact"}} @placeholder="Add a contact" @content={{selectedContacts}} @options={{remainingContacts}} />
 
       <blockquote>
-        <code>paper-contact-chips</code> expects the name, email address and image
+        <code>{{"<PaperContactChips>"}}</code> expects the name, email address and image
         to be supplied as <code>name</code>, <code>email</code> and <code>image</code>
         respectively. If your field names differ from these, specify them using the
         <code>nameField</code>, <code>emailField</code> and <code>imageField</code>

tests/dummy/app/templates/demo/dialog.hbs

@@ -51,7 +51,7 @@
             (p-row "fullscreen" "boolean" "Causes the dialog to become fullscreen at smaller breakpoints.")
             (p-row "opaque" "boolean" "Causes the backdrop to become opaque. Defaults to `true`.")
             (p-row "clickOutsideToClose" "boolean" "Causes clicking on the backdrop to trigger the `onClose` handler. Defaults to `false`.")
-            (p-row "focusOnOpen" "boolean" "Causes the initial focus to be on an inner element with the autofocus attribute, rather than the last button inside `{{paper-dialog-actions}}`. Defaults to `true`.")
+            (p-row "focusOnOpen" "boolean" "Causes the initial focus to be on an inner element with the autofocus attribute, rather than the last button inside `<PaperDialogActions />`. Defaults to `true`.")
             (p-row "escapeToClose" "boolean" "Causes pressing escape to close the dialog. Defaults to `true`.")
           )
           (p-section

tests/dummy/app/templates/demo/icons.hbs

@@ -14,28 +14,28 @@
   <h3>Basic Icons</h3>
   <div>
     {{! BEGIN-SNIPPET icons.basic-usage }}
-    {{paper-icon "check-circle"}}
+    <PaperIcon @icon="check-circle" />
     {{! END-SNIPPET }}
   </div>
   <CodeSnippet @name="icons.basic-usage.hbs" />
 
   <h3>Changing Sizes</h3>
   <div class="layout-row">
     {{! BEGIN-SNIPPET icons.sizes }}
-    {{paper-icon "check-circle" size=12}}
-    {{paper-icon "check-circle" size=18}}
-    {{paper-icon "check-circle" size=24}}
-    {{paper-icon "check-circle" size=36}}
-    {{paper-icon "check-circle" size=48}}
+    <PaperIcon @icon="check-circle" @size={{12}} />
+    <PaperIcon @icon="check-circle" @size={{18}} />
+    <PaperIcon @icon="check-circle" @size={{24}} />
+    <PaperIcon @icon="check-circle" @size={{36}} />
+    <PaperIcon @icon="check-circle" @size={{48}} />
     {{! END-SNIPPET }}
   </div>
   <CodeSnippet @name="icons.sizes.hbs" />
 
   <h3>Spinners</h3>
   <div>
     {{! BEGIN-SNIPPET icons.spinners }}
-    {{paper-icon "rotate-right" spin=true}}
-    {{paper-icon "rotate-left" reverseSpin=true}}
+    <PaperIcon @icon="rotate-right" @spin={{true}} />
+    <PaperIcon @icon="rotate-left" @reverseSpin={{true}} />
     {{! END-SNIPPET }}
   </div>
   <CodeSnippet @name="icons.spinners.hbs" />

tests/dummy/app/templates/demo/input.hbs

@@ -202,13 +202,13 @@
 
   <h2>Setting validation messages from external validations</h2>
   <p>
-    While <code>\{{paper-input}}</code> supplies four
+    While <code>{{"<PaperInput>"}}</code> supplies four
     built-in validation rules and the ability to specify programmed custom
     validations, some projects need more complicated and elaborate validations,
     such as are provided by <code>ember-cp-validations</code> or another validation add-on.
     In this case, the code to validate the user input is outside of
-    <code>paper-input</code>, and only the resulting messages need be provided to the
-    <code>\{{paper-input}}</code> helper.
+    <code>{{"<PaperInput>"}}</code>, and only the resulting messages need be provided to the
+    <code>{{"<PaperInput>"}}</code> helper.
   </p>
   {{! BEGIN-SNIPPET input.external-validations }}
   <PaperCard as |card|>

tests/dummy/app/templates/demo/list.hbs

@@ -59,7 +59,7 @@
         <PaperSubheader>Icons</PaperSubheader>
         {{#each phoneNumbers as |phone|}}
           <PaperItem @class="md-2-line">
-            {{paper-icon "phone" class="md-avatar-icon"}}
+            <PaperIcon @icon="phone" @class="md-avatar-icon" />
             <div class="md-list-item-text">
               <h3>{{phone.number}}</h3>
               <p>{{phone.type}}</p>
@@ -119,21 +119,21 @@
 
         <PaperSubheader>Clickable Items with Secondary Controls</PaperSubheader>
         <PaperItem @onClick={{action "transitionToWifiMenu"}} as |controls|>
-          {{paper-icon "network-wifi"}}
+          <PaperIcon @icon="network-wifi" />
           <p>Wi-Fi</p>
           <div class="md-secondary-container">
             <controls.switch @secondary={{true}} @value={{wifiEnabled}} @onChange={{action (mut wifiEnabled)}} />
           </div>
         </PaperItem>
         <PaperItem @onClick={{action "transitionToBluetoothMenu"}} as |controls|>
-          {{paper-icon "bluetooth"}}
+          <PaperIcon @icon="bluetooth" />
           <p>Bluetooth</p>
           <div class="md-secondary-container">
             <controls.switch @secondary={{true}} @value={{bluetoothEnabled}} @onChange={{action (mut bluetoothEnabled)}} />
           </div>
         </PaperItem>
         <PaperItem @onClick={{action "transitionToDataUsage"}}>
-          {{paper-icon "data-usage"}}
+          <PaperIcon @icon="data-usage" />
           <p>Data Usage</p>
         </PaperItem>
 
@@ -146,7 +146,7 @@
             <p>{{item.message}}</p>
             <div class="md-secondary-container">
               <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
-                {{paper-icon "message"}}
+                <PaperIcon @icon="message" />
               </controls.button>
             </div>
           </PaperItem>
@@ -162,10 +162,10 @@
             <div class="md-secondary-container">
               <controls.checkbox @value={{item.checked}} @onChange={{action (mut item.checked)}} />
               <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
-                {{paper-icon "email"}}
+                <PaperIcon @icon="email" />
               </controls.button>
               <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
-                {{paper-icon "message"}}
+                <PaperIcon @icon="message" />
               </controls.button>
             </div>
           </PaperItem>
@@ -197,7 +197,7 @@
               <p>Some notes here.</p>
             </div>
             <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryPersonClick" item}}>
-              {{paper-icon "phone"}}
+              <PaperIcon @icon="phone" />
             </controls.button>
           </PaperItem>
         {{/each}}