chore(docs): deprecation notices for methods and properties

Closes #15351

Author: petebacondarwin

docs/config/templates/app/runnableExample.template.html

@@ -1,24 +1,26 @@
-{# Be aware that we need these extra new lines here or marked will not realise that the <div>
+{# Be aware that we need these extra new lines here or marked will not realize that the <div>
    is HTML and wrap each line in a <p> - thus breaking the HTML #}
 
+<div>
+  <plnkr-opener example-path="{$ doc.path $}"></plnkr-opener>
 
-<div class="runnable-example"
-    path="{$ doc.example.deployments.default.path $}"
-    {%- for attrName, attrValue in doc.example.attributes %}
-    {$ attrName $}="{$ attrValue $}"{% endfor %}>
+  <div class="runnable-example"
+      path="{$ doc.example.deployments.default.path $}"
+      {%- for attrName, attrValue in doc.example.attributes %}
+      {$ attrName $}="{$ attrValue $}"{% endfor %}>
 
- {% for fileName, file in doc.example.files %}
-  <div class="runnable-example-file" {% for attrName, attrValue in file.attributes %}
-    {$ attrName $}="{$ attrValue $}"{% endfor %}>
-    {% code -%}
-    {$ file.fileContents $}
-    {%- endcode %}
-  </div>
-{% endfor %}
+  {% for fileName, file in doc.example.files %}
+    <div class="runnable-example-file" {% for attrName, attrValue in file.attributes %}
+      {$ attrName $}="{$ attrValue $}"{% endfor %}>
+      {% code -%}
+      {$ file.fileContents $}
+      {%- endcode %}
+    </div>
+  {% endfor %}
 
-  <iframe class="runnable-example-frame" src="{$ doc.example.deployments.default.outputPath $}" name="{$ doc.example.id $}"></iframe>
+    <iframe class="runnable-example-frame" src="{$ doc.example.deployments.default.outputPath $}" name="{$ doc.example.id $}"></iframe>
+  </div>
 </div>
 
-
-{# Be aware that we need these extra new lines here or marked will not realise that the <div>
-   above is HTML and wrap each line in a <p> - thus breaking the HTML #}
+{# Be aware that we need these extra new lines here or marked will not realize that the <div>
+   above is HTML and wrap each line in a <p> - thus breaking the HTML #}

docs/config/templates/examples/runnableExample.template.html

@@ -1,14 +1,20 @@
 {% extends "base.template.html" %}
+{% import "lib/deprecated.html" as x -%}
+
 
 {% block content %}
 
+<a href='https://github.com/{$ git.info.owner $}/{$ git.info.repo $}/tree/{$ git.version.isSnapshot and 'master' or git.version.raw $}/{$ doc.fileInfo.projectRelativePath $}#L{$ doc.startingLine $}' class='view-source pull-right btn btn-primary'>
+  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
+</a>
+
 {% block header %}
 <header class="api-profile-header">
   <h1 class="api-profile-header-heading">{$ doc.name $}</h1>
   <ol class="api-profile-header-structure naked-list step-list">
     {% block related_components %}{% endblock %}
     <li>
-      - {$ doc.docType $} in module {$ doc.moduleDoc.id | link(doc.moduleDoc.name, doc.moduleDoc) $}
+      - {$ doc.docType $} in module <a href="{$ doc.moduleDoc.path $}">{$ doc.moduleDoc.name $}</a>
     </li>
   </ol>
 </header>
@@ -24,17 +30,12 @@ <h1 class="api-profile-header-heading">{$ doc.name $}</h1>
 <h2 id="known-issues">Known Issues</h2>
 {% for issue in doc.knownIssues -%}
 <div class="known-issue">
-  {$ issue | marked $}
+  {$ issue | marked $}  {% if not loop.last %}<hr>{% endif %}
 </div>
 {% endfor -%}
 {% endif %}
 
-{% if doc.deprecated %}
-<fieldset class="deprecated">
-  <legend>Deprecated API</legend>
-  {$ doc.deprecated| marked $}
-</fieldset>
-{% endif %}
+{$ x.deprecatedBlock(doc) $}
 
 <div>
   {% block dependencies %}

docs/config/templates/ngdoc/api/api.template.html

@@ -0,0 +1,6 @@
+{% macro deprecatedBlock(doc) %}{% if doc.deprecated %}
+<div class="alert alert-warning">
+  <div class="deprecated-title">Deprecated:</div>
+  {$ doc.deprecated| marked $}
+</div>
+{% endif %}{% endmacro %}

docs/config/templates/ngdoc/lib/deprecated.html

@@ -1,11 +1,16 @@
 {% import "lib/macros.html" as lib -%}
+{% import "lib/deprecated.html" as x -%}
+
 {%- if doc.events %}
 <h2>Events</h2>
 <ul class="events">
   {%- for event in doc.events %}
   <li id="{$ event.name $}">
     <h3>{$ event.name $}</h3>
     <div>{$ event.description | marked $}</div>
+
+    {$ x.deprecatedBlock(event) $}
+
     {%- if event.eventType == 'listen' %}
     <div class="inline">
       <h4>Listen on: {$ event.eventTarget $}</h4>

docs/config/templates/ngdoc/lib/events.template.html

@@ -1,4 +1,6 @@
 {% import "lib/macros.html" as lib -%}
+{% import "lib/deprecated.html" as x -%}
+
 {%- if doc.methods %}
 <h2>Methods</h2>
 <ul class="methods">
@@ -7,6 +9,8 @@ <h2>Methods</h2>
     <h3>{$ lib.functionSyntax(method) $}</h3>
     <div>{$ method.description | marked $}</div>
 
+    {$ x.deprecatedBlock(method) $}
+
     {% if method.params %}
     <h4>Parameters</h4>
     {$ lib.paramTable(method.params) $}

docs/config/templates/ngdoc/lib/methods.template.html

@@ -1,11 +1,14 @@
 {% import "lib/macros.html" as lib -%}
+{% import "lib/deprecated.html" as x -%}
+
 {%- if doc.properties %}
 <h2>Properties</h2>
 <ul class="properties">
   {%- for property in doc.properties %}
   <li id="{$ property.name $}">
     <h3>{$ property.name | code $}</h3>
     {$ lib.typeInfo(property) $}
+    {$ x.deprecatedBlock(property) $}
   </li>
   {% endfor -%}
 </ul>