Add forceRender property to tabs (#15699)

closes TryGhost/Team#2163
- `forceRender` property adds ability to render content of tabs in
advance (even if tab wasn't selected)

ghost/admin/app/components/posts/analytics.hbs

@@ -41,7 +41,7 @@
         </div>
     </GhCanvasHeader>
 
-    <Tabs::Tabs class="gh-tabs-analytics" as |tabs|>
+    <Tabs::Tabs class="gh-tabs-analytics" @forceRender={{true}} as |tabs|>
         {{#if this.post.hasBeenEmailed}}
             <tabs.tab>
                 <h3>Sent</h3>

ghost/admin/app/components/tabs/tab-panel.hbs

@@ -5,7 +5,7 @@
     aria-labelledby="{{this.tabId}}"
     class="tab-panel {{if this.isSelectedTab "tab-panel-selected" }}"
 >
-    {{#if this.isSelectedTab}}
+    {{#if (or this.isSelectedTab @forceRender)}}
         {{yield}}
     {{/if}}
 </div>

ghost/admin/app/components/tabs/tabs.hbs

@@ -24,6 +24,7 @@
                 selectedIndex=this.selectedIndex
                 index=this.addPanelIndex
                 tabIds=this.tabIds
+                forceRender=@forceRender
             )
         )
     }}

ghost/admin/app/styles/layouts/content.css

@@ -1621,7 +1621,12 @@ a.gh-post-list-cta.stats.is-hovered:hover > * {
     box-shadow: inset 0 -1px 0 #eceef0;
 }
 
+.gh-tabs-analytics .tab-panel {
+    display: none;
+}
+
 .gh-tabs-analytics .tab-panel-selected {
+    display: block;
     padding: 12px 26px 0;
     /* help to hide shadow from selected tab */
     opacity: 0.99999;