chore: Convert components to angle bracket syntax

app/templates/account.hbs

@@ -1,30 +1,30 @@
 <div class="ui stackable grid">
   <div class="sixteen wide column">
-    {{unverified-user-message}}
+    <UnverifiedUserMessage />
   </div>
 </div>
 <div class="row">
   <div class="sixteen wide column">
-    {{#tabbed-navigation}}
-      {{#link-to 'account.profile' class='item'}}
+    <TabbedNavigation>
+      <LinkTo @route="account.profile" class="item">
         {{t 'Profile'}}
-      {{/link-to}}
-      {{#link-to 'account.billing' class='item'}}
+      </LinkTo>
+      <LinkTo @route="account.billing" class="item">
         {{t 'Billing Info'}}
-      {{/link-to}}
-      {{#link-to 'account.password' class='item'}}
+      </LinkTo>
+      <LinkTo @route="account.password" class="item">
         {{t 'Password'}}
-      {{/link-to}}
-      {{#link-to 'account.email-preferences' class='item'}}
+      </LinkTo>
+      <LinkTo @route="account.email-preferences" class="item">
         {{t 'Email-Preferences'}}
-      {{/link-to}}
-      {{#link-to 'account.applications' class='item'}}
+      </LinkTo>
+      <LinkTo @route="account.applications" class="item">
         {{t 'Applications'}}
-      {{/link-to}}
-      {{#link-to 'account.danger-zone' class='item'}}
+      </LinkTo>
+      <LinkTo @route="account.danger-zone" class="item">
         {{t 'Danger Zone'}}
-      {{/link-to}}
-    {{/tabbed-navigation}}
+      </LinkTo>
+    </TabbedNavigation>
   </div>
 </div>
 <div class="ui segment">

app/templates/admin.hbs

@@ -1,40 +1,40 @@
 <div class="row">
   <div class="x-scrollable sixteen wide column">
-    {{#tabbed-navigation}}
-      {{#link-to 'admin.index' class='item'}}
+    <TabbedNavigation>
+      <LinkTo @route="admin.index" class="item">
         {{t 'Admin'}}
-      {{/link-to}}
-      {{#link-to 'admin.events' class='item'}}
+      </LinkTo>
+      <LinkTo @route="admin.events" class="item">
         {{t 'Events'}}
-      {{/link-to}}
-      {{#link-to 'admin.sales' class='item'}}
+      </LinkTo>
+      <LinkTo @route="admin.sales" class="item">
         {{t 'Sales'}}
-      {{/link-to}}
-      {{#link-to 'admin.sessions' class='item'}}
+      </LinkTo>
+      <LinkTo @route="admin.sessions" class="item">
         {{t 'Sessions'}}
-      {{/link-to}}
-      {{#link-to 'admin.users' class='item'}}
+      </LinkTo>
+      <LinkTo @route="admin.users" class="item">
         {{t 'Users'}}
-      {{/link-to}}
-      {{#link-to 'admin.permissions' class='item'}}
+      </LinkTo>
+      <LinkTo @route="admin.permissions" class="item">
         {{t 'Permissions'}}
-      {{/link-to}}
-      {{#link-to 'admin.messages' class='item'}}
+      </LinkTo>
+      <LinkTo @route="admin.messages" class="item">
         {{t 'Messages'}}
-      {{/link-to}}
-      {{#link-to 'admin.reports' class='item'}}
+      </LinkTo>
+      <LinkTo @route="admin.reports" class="item">
         {{t 'Reports'}}
-      {{/link-to}}
-      {{#link-to 'admin.settings' class='item'}}
+      </LinkTo>
+      <LinkTo @route="admin.settings" class="item">
         {{t 'Settings'}}
-      {{/link-to}}
-      {{#link-to 'admin.modules' class='item'}}
+      </LinkTo>
+      <LinkTo @route="admin.modules" class="item">
         {{t 'Modules'}}
-      {{/link-to}}
-      {{#link-to 'admin.content' class='item'}}
+      </LinkTo>
+      <LinkTo @route="admin.content" class="item">
         {{t 'Content'}}
-      {{/link-to}}
-    {{/tabbed-navigation}}
+      </LinkTo>
+    </TabbedNavigation>
   </div>
 </div>
 <div class="ui basic segment">

app/templates/admin/content.hbs

@@ -1,23 +1,23 @@
 <div class="ui grid">
   <div class="row">
     <div class="sixteen wide column">
-      {{#tabbed-navigation isNonPointing=true}}
-        {{#link-to 'admin.content.index' class='item'}}
+      <TabbedNavigation @isNonPointing={{true}}>
+        <LinkTo @route="admin.content.index" class="item">
           {{t 'Social Links'}}
-        {{/link-to}}
-        {{#link-to 'admin.content.pages' class='item'}}
+        </LinkTo>
+        <LinkTo @route="admin.content.pages" class="item">
           {{t 'Pages'}}
-        {{/link-to}}
-        {{#link-to 'admin.content.system-images' class='item'}}
+        </LinkTo>
+        <LinkTo @route="admin.content.system-images" class="item">
           {{t 'System Images'}}
-        {{/link-to}}
-        {{#link-to 'admin.content.translations' class='item'}}
+        </LinkTo>
+        <LinkTo @route="admin.content.translations" class="item">
           {{t 'Translations'}}
-        {{/link-to}}
-        {{#link-to 'admin.content.events' class='item'}}
+        </LinkTo>
+        <LinkTo @route="admin.content.events" class="item">
           {{t 'Events'}}
-        {{/link-to}}
-      {{/tabbed-navigation}}
+        </LinkTo>
+      </TabbedNavigation>
     </div>
   </div>
   <div class="row">

app/templates/admin/content/events.hbs

@@ -26,12 +26,18 @@
                     </div>
                     <div class="eight wide column right aligned">
                       <div class="ui horizontal compact basic buttons">
-                        {{#ui-popup content=(t 'Edit') class='ui icon button' click=(action 'openModalFor' eventType)}}
+                        <UiPopup
+                          @content={{t "Edit"}}
+                          @class="ui icon button"
+                          @click={{action "openModalFor" eventType}}>
                           <i class="edit icon"></i>
-                        {{/ui-popup}}
-                        {{#ui-popup content=(t 'Delete') class='ui icon button' click=(action (confirm (t 'Are you sure you would like to delete this event type?') (action 'deleteEventProperty' eventType)))}}
+                        </UiPopup>
+                        <UiPopup
+                          @content={{t "Delete"}}
+                          @class="ui icon button"
+                          @click={{action (confirm (t "Are you sure you would like to delete this event type?") (action "deleteEventProperty" eventType))}}>
                           <i class="trash outline icon"></i>
-                        {{/ui-popup}}
+                        </UiPopup>
                       </div>
                     </div>
                   </div>
@@ -68,12 +74,18 @@
                     </div>
                     <div class="eight wide column right aligned">
                       <div class="ui horizontal compact basic buttons">
-                        {{#ui-popup content=(t 'Edit') class='ui icon button' click=(action 'openModalFor' eventTopic)}}
+                        <UiPopup
+                          @content={{t "Edit"}}
+                          @class="ui icon button"
+                          @click={{action "openModalFor" eventTopic}}>
                           <i class="edit icon"></i>
-                        {{/ui-popup}}
-                        {{#ui-popup content=(t 'Delete') class='ui icon button' click=(action (confirm (t 'Are you sure you would like to delete this event topic?') (action 'deleteEventProperty' eventTopic)))}}
+                        </UiPopup>
+                        <UiPopup
+                          @content={{t "Delete"}}
+                          @class="ui icon button"
+                          @click={{action (confirm (t "Are you sure you would like to delete this event topic?") (action "deleteEventProperty" eventTopic))}}>
                           <i class="trash outline icon"></i>
-                        {{/ui-popup}}
+                        </UiPopup>
                       </div>
                     </div>
                   </div>
@@ -101,15 +113,17 @@
         <div class="ui divider"></div>
         <div class="field">
           <label>{{t 'Event Topic'}}</label>
-          {{#ui-dropdown class='search selection' onChange=(action 'loadSubTopics') as |execute mapper|}}
+          <UiDropdown
+            @class="search selection"
+            @onChange={{action "loadSubTopics"}} as |execute mapper|>
             <i class="dropdown icon"></i>
             <div class="default text">{{t 'Select Event Topic'}}</div>
             <div class="menu">
               {{#each model.eventTopics as |topic|}}
                 <div class="item" data-value="{{map-value mapper topic}}">{{topic.name}}</div>
               {{/each}}
             </div>
-          {{/ui-dropdown}}
+          </UiDropdown>
         </div>
         {{#if model.eventSubTopics}}
           <table class="ui celled table">
@@ -123,12 +137,18 @@
                       </div>
                       <div class="eight wide column right aligned">
                         <div class="ui horizontal compact basic buttons">
-                          {{#ui-popup content=(t 'Edit') class='ui icon button' click=(action 'openModalFor' subTopic)}}
+                          <UiPopup
+                            @content={{t "Edit"}}
+                            @class="ui icon button"
+                            @click={{action "openModalFor" subTopic}}>
                             <i class="edit icon"></i>
-                          {{/ui-popup}}
-                          {{#ui-popup content=(t 'Delete') class='ui icon button' click=(action (confirm (t 'Are you sure you would like to delete this event sub topic?') (action 'deleteEventProperty' subTopic)))}}
+                          </UiPopup>
+                          <UiPopup
+                            @content={{t "Delete"}}
+                            @class="ui icon button"
+                            @click={{action (confirm (t "Are you sure you would like to delete this event sub topic?") (action "deleteEventProperty" subTopic))}}>
                             <i class="trash outline icon"></i>
-                          {{/ui-popup}}
+                          </UiPopup>
                         </div>
                       </div>
                     </div>
@@ -143,16 +163,19 @@
   </div>
 </div>
 
-{{modals/admin/content/new-event-type-modal isOpen=eventType.openModal
-                              name=eventType.name
-                              addEventProperty=(action 'addEventProperty' eventType)}}
+<Modals::Admin::Content::NewEventTypeModal
+  @isOpen={{eventType.openModal}}
+  @name={{eventType.name}}
+  @addEventProperty={{action "addEventProperty" eventType}} />
 
-{{modals/admin/content/new-event-topic-modal isOpen=eventTopic.openModal
-                              name=eventTopic.name
-                              addEventProperty=(action 'addEventProperty' eventTopic)}}
+<Modals::Admin::Content::NewEventTopicModal
+  @isOpen={{eventTopic.openModal}}
+  @name={{eventTopic.name}}
+  @addEventProperty={{action "addEventProperty" eventTopic}} />
 
-{{modals/admin/content/new-event-sub-topic-modal isOpen=eventSubTopic.openModal
-                              model=model
-                              eventSubTopic=eventSubTopic
-                              eventTopic=currentTopicSelected
-                              addEventProperty=(action 'addEventProperty' eventSubTopic)}}
+<Modals::Admin::Content::NewEventSubTopicModal
+  @isOpen={{eventSubTopic.openModal}}
+  @model={{model}}
+  @eventSubTopic={{eventSubTopic}}
+  @eventTopic={{currentTopicSelected}}
+  @addEventProperty={{action "addEventProperty" eventSubTopic}} />

app/templates/admin/content/index.hbs

@@ -1 +1 @@
-{{forms/admin/content/social-links-form socials=model save='saveSocials' isLoading=isLoading}}
+<Forms::Admin::Content::SocialLinksForm @socials={{model}} @save="saveSocials" @isLoading={{isLoading}} />

app/templates/admin/content/pages.hbs

@@ -40,7 +40,7 @@
     </div>
     <div class="column eleven wide">
       {{#if isFormOpen}}
-        {{forms/admin/content/pages-form data=currentForm save='savePage' isCreate=isCreate isFormOpen=isFormOpen}}
+        <Forms::Admin::Content::PagesForm @data={{currentForm}} @save="savePage" @isCreate={{isCreate}} @isFormOpen={{isFormOpen}} />
       {{/if}}
     </div>
   </div>

app/templates/admin/content/system-images.hbs

@@ -1,13 +1,13 @@
 <div class="ui stackable grid">
   <div class="row">
     <div class="three wide column">
-      {{#tabbed-navigation isVertical=true}}
+      <TabbedNavigation @isVertical={{true}}>
         {{#each model as |topic|}}
-          {{#link-to 'admin.content.system-images.list' topic.id  class='link item'}}
+          <LinkTo @route="admin.content.system-images.list" @model={{topic.id}} class="link item">
             {{topic.name}}
-          {{/link-to}}
+          </LinkTo>
         {{/each}}
-      {{/tabbed-navigation}}
+      </TabbedNavigation>
     </div>
     <div class="thirteen wide column">
       {{outlet}}

app/templates/admin/content/system-images/list.hbs

@@ -2,8 +2,7 @@
   {{#each data as |subTopic|}}
     <div class="eight wide column">
       <h4>{{subTopic.name}}</h4>
-      {{widgets/safe-image isAvatar=true class='ui big image' src=(if subTopic.placeholder.originalImageUrl subTopic.placeholder.originalImageUrl
-        '/images/placeholders/avatar.png')}}
+      <Widgets::SafeImage @isAvatar={{true}} @class="ui big image" @src={{if subTopic.placeholder.originalImageUrl subTopic.placeholder.originalImageUrl "/images/placeholders/avatar.png"}} />
       <div class="ui hidden divider"></div>
       <button class="ui button primary" {{action 'openModal' subTopic.placeholder}} id="changebutton">{{t 'Change'}}</button>
     </div>
@@ -13,4 +12,4 @@
     </div>
   {{/each}}
 </div>
-{{modals/change-image-modal isOpen=isModalOpen placeholder=selectedPlaceholder}}
+<Modals::ChangeImageModal @isOpen={{isModalOpen}} @placeholder={{selectedPlaceholder}} />

app/templates/admin/content/translations.hbs

@@ -24,7 +24,7 @@
     </div>
     <div class="column eight wide ui grid center aligned">
       <h4 class="ui header">{{t 'Update .PO files :'}}</h4>
-      {{forms/admin/content/translation-form languages=model}}
+      <Forms::Admin::Content::TranslationForm @languages={{model}} />
     </div>
   </div>
 </div>

app/templates/admin/events.hbs

@@ -1,26 +1,26 @@
 <div class="ui grid stackable">
   <div class="row">
     <div class="sixteen wide column">
-      {{#tabbed-navigation isNonPointing=true}}
-        {{#link-to 'admin.events.list' 'live' class='item'}}
+      <TabbedNavigation @isNonPointing={{true}}>
+        <LinkTo @route="admin.events.list" @model="live" class="item">
           {{t 'All Live'}}
-        {{/link-to}}
-        {{#link-to 'admin.events.list' 'draft' class='item'}}
+        </LinkTo>
+        <LinkTo @route="admin.events.list" @model="draft" class="item">
           {{t 'All Draft'}}
-        {{/link-to}}
-        {{#link-to 'admin.events.list' 'past' class='item'}}
+        </LinkTo>
+        <LinkTo @route="admin.events.list" @model="past" class="item">
           {{t 'All Past'}}
-        {{/link-to}}
-        {{#link-to 'admin.events.list' 'all' class='item'}}
+        </LinkTo>
+        <LinkTo @route="admin.events.list" @model="all" class="item">
           {{t 'All Events'}}
-        {{/link-to}}
-        {{#link-to 'admin.events.list' 'deleted' class='item'}}
+        </LinkTo>
+        <LinkTo @route="admin.events.list" @model="deleted" class="item">
           {{t 'All Deleted'}}
-        {{/link-to}}
-        {{#link-to 'admin.events.import' class='item'}}
+        </LinkTo>
+        <LinkTo @route="admin.events.import" class="item">
           {{t 'Import'}}
-        {{/link-to}}
-      {{/tabbed-navigation}}
+        </LinkTo>
+      </TabbedNavigation>
     </div>
   </div>
   <div class="row">

app/templates/admin/events/import.hbs

@@ -1,4 +1,4 @@
 <div class="sixteen wide column">
-  {{events/event-import-section}}
-  {{events/imports-history-section}}
+  <Events::EventImportSection />
+  <Events::ImportsHistorySection />
 </div>