builds and docs: fix #5568 (expansion) and #5793 (tslint + icons)

src/lib/expansion/expansion.md

@@ -0,0 +1,79 @@
+Angular Material expansion provides a way to show and hide lightweight content, by collapsing and expanding a view with a nice animation. The `expanded` input allows to choose among the collapsed or expanded state. 
+
+Each expansion has a header and an action sections. The header section is always visible at the top of the component and contains a title and a description subsections. The action section is fixed at the bottom, being visible when the expansion is in expanded state
+
+When grouped by an `<md-accordion>` element, the expansions can be used for the creation of flows, as it brings up the possibility to expand one view at a time.
+
+<!-- example(expansion-overview) -->
+
+### Events
+
+The `closed` and `opened` output events are emitted when the expansion is collapsed/expanded.
+
+### Headers section
+
+By default, the expansion header has a toogle sign at the right edge, pointing up when the expansion is expanded and down when it's collapsed. The toogle icon can be hiden setting the `toogleHide` to `true`. 
+
+The `<md-panel-title>` subsecion is shown in the begining of the header, followed by the `<md-panel-description>` subsection, which is supposed to have a sumary of what's in the expansion content.
+
+```html
+<md-expansion-panel>
+  <md-expansion-panel-header>
+    This is the expansion title
+  </md-expansion-panel-header>
+
+  <md-action-row>
+    <button md-button>Action</button>
+  </md-action-row>
+
+  This the expansion content
+
+</md-expansion-panel>
+```
+
+For more complex headers, use the `<md-panel-title>` and `<md-panel-description>` header selectors:
+
+```html
+<md-expansion-panel>
+  <md-expansion-panel-header>
+    <md-panel-title>
+      This is the expansion title
+    </md-panel-title>
+    <md-panel-description>
+      This is a summary of the content
+    </md-panel-description>
+  </md-expansion-panel-header>
+
+  <p>...</p>
+
+</md-expansion-panel>
+```
+
+### Accordion
+
+It's possible to group expansions in a fancy way. The `multi="true"` input allows the expansions state to be set independently of each other. When `multi="false"` (default) just one expansion can be expanded at a given time:
+
+```html
+<md-accordion>
+
+  <md-expansion-panel multi="false">
+    <md-expansion-panel-header>
+        This is the expansion 1 title
+    </md-expansion-panel-header>
+
+    This the expansion 1 content
+
+  </md-expansion-panel>
+
+  <md-expansion-panel>
+    <md-expansion-panel-header>
+        This is the expansion 2 title
+    </md-expansion-panel-header>
+
+    This the expansion 2 content
+
+  </md-expansion-panel>
+
+</md-accordion>
+```
+

src/lib/icon/icon-registry.ts

@@ -180,7 +180,7 @@ export class MdIconRegistry {
   }
 
   /**
-   * Returns an Observable that produces the icon (as an <svg> DOM element) from the given URL.
+   * Returns an Observable that produces the icon (as an `<svg>` DOM element) from the given URL.
    * The response from the URL may be cached so this will not always cause an HTTP request, but
    * the produced element will always be a new copy of the originally fetched icon. (That is,
    * it will not contain any modifications made to elements previously returned).
@@ -207,7 +207,7 @@ export class MdIconRegistry {
   }
 
   /**
-   * Returns an Observable that produces the icon (as an <svg> DOM element) with the given name
+   * Returns an Observable that produces the icon (as an `<svg>` DOM element) with the given name
    * and namespace. The icon must have been previously registered with addIcon or addIconSet;
    * if not, the Observable will throw an error.
    *

src/material-examples/expansion-overview/expansion-overview-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/material-examples/expansion-overview/expansion-overview-example.html

@@ -0,0 +1,19 @@
+<md-expansion-panel>
+    <md-expansion-panel-header>
+      <md-panel-title>
+        Personal data
+      </md-panel-title>
+      <md-panel-description>
+        Type your name and age
+      </md-panel-description>
+    </md-expansion-panel-header>
+
+    <md-input-container>
+      <input mdInput placeholder="First name">
+    </md-input-container>
+
+    <md-input-container>
+      <input mdInput placeholder="Age">
+    </md-input-container>
+
+  </md-expansion-panel>

src/material-examples/expansion-overview/expansion-overview-example.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'expansion-overview-example',
+  templateUrl: 'expansion-overview-example.html',
+})
+export class ExpansionOverviewExample {}

src/material-examples/expansion-steps/expansion-steps-example.css

@@ -0,0 +1,12 @@
+.headers-align .mat-expansion-panel-header-title,
+.headers-align .mat-expansion-panel-header-description {
+  flex-basis: 0;
+}
+
+.icons-to-right {
+    display: inline-block;
+    width: 100%;
+    text-align: right;
+    margin-top: 5px;
+    color: blue;
+}

src/material-examples/expansion-steps/expansion-steps-example.html

@@ -0,0 +1,70 @@
+<md-accordion class="headers-align">
+  <md-expansion-panel [expanded]="step === 0" (opened)="openEvent(0)" hideToggle="true">
+    <md-expansion-panel-header>
+      <md-panel-title>
+        Personal data
+      </md-panel-title>
+      <md-panel-description>
+        <div>Type your name and age</div>
+        <div class="icons-to-right"><md-icon>account_circle</md-icon></div>
+      </md-panel-description>
+    </md-expansion-panel-header>
+
+    <md-input-container>
+      <input mdInput placeholder="First name">
+    </md-input-container>
+
+    <md-input-container>
+      <input mdInput placeholder="Age">
+    </md-input-container>
+
+    <md-action-row>
+      <button md-button color="primary" (click)="nextStep()">Next</button>
+    </md-action-row>
+  </md-expansion-panel>
+
+  <md-expansion-panel [expanded]="step === 1" (opened)="openEvent(1)" hideToggle="true">
+    <md-expansion-panel-header>
+      <md-panel-title>
+        Destination
+      </md-panel-title>
+      <md-panel-description>
+        <div>Type the country name</div>
+        <div class="icons-to-right"><md-icon>map</md-icon></div>
+      </md-panel-description>
+    </md-expansion-panel-header>
+
+    <md-input-container>
+      <input mdInput placeholder="Country">
+    </md-input-container>
+
+    <md-action-row>
+      <button md-button color="warn" (click)="prevStep()">Previous</button>
+      <button md-button color="primary" (click)="nextStep()">Next</button>
+    </md-action-row>
+  </md-expansion-panel>
+
+  <md-expansion-panel [expanded]="step === 2" (opened)="openEvent(2)" hideToggle="true">
+    <md-expansion-panel-header>
+      <md-panel-title>
+        Day of the trip
+      </md-panel-title>
+      <md-panel-description>
+        <div>Inform the date you wish to travel</div>
+        <div class="icons-to-right"><md-icon>date_range</md-icon></div>
+      </md-panel-description>
+    </md-expansion-panel-header>
+
+    <md-input-container>
+      <input mdInput placeholder="Date" [mdDatepicker]="picker" 
+        (focus)="picker.open()" readonly>
+    </md-input-container>
+    <md-datepicker #picker></md-datepicker>
+
+    <md-action-row>
+      <button md-button color="warn" (click)="prevStep()">Previous</button>
+      <button md-button color="primary" (click)="nextStep()">End</button>
+    </md-action-row>
+  </md-expansion-panel>
+
+</md-accordion>

src/material-examples/expansion-steps/expansion-steps-example.ts

@@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  selector: 'expansion-overview-example',
+  templateUrl: 'expansion-overview-example.html',
+})
+export class ExpansionStepsExample {
+  public step = 0;
+
+  openEvent(stepNumb: number) {
+    this.step = stepNumb;
+  }
+
+  nextStep() {
+    this.step++;
+  }
+
+  prevStep() {
+    this.step--;
+  }
+}

tools/tslint-rules/noUnscapedHtmlTagRule.js

@@ -0,0 +1,64 @@
+const ts = require('typescript');
+const utils = require('tsutils');
+const Lint = require('tslint');
+
+const ERROR_MESSAGE =
+    'A HTML tag may only appear if it is escaped. ' +
+    'This is meant to prevent failures in docs generation caused by a misinterpreted tag.';
+
+/**
+ * Rule that walks through all comments inside of the library and adds failures when it
+ * detects unescaped HTML tags inside of multi-line comments.
+ */
+class Rule extends Lint.Rules.AbstractRule {
+
+  apply(sourceFile) {
+    return this.applyWithWalker(new NoUnescapedHtmlTagWalker(sourceFile, this.getOptions()));
+  }
+}
+
+class NoUnescapedHtmlTagWalker extends Lint.RuleWalker {
+
+  visitSourceFile(sourceFile) {
+    utils.forEachComment(sourceFile, (fullText, commentRange) => {
+
+      let isEscapedHtmlTag = true;
+      while (true) {
+        const iOpenTag = fullText.indexOf('<');
+        const iCloseTag = fullText.indexOf('>');
+        if ((iOpenTag === -1) && (iCloseTag === -1)) {
+          break;
+        }
+        if ((iCloseTag < iOpenTag) || (iCloseTag === -1)) {
+          isEscapedHtmlTag = false;
+          break;
+        }
+        let iTestTag = fullText.indexOf('<', iOpenTag + 1);
+        if ((iTestTag > iOpenTag) && (iTestTag < iCloseTag)) {
+          isEscapedHtmlTag = false;
+          break;
+        }
+        iTestTag = fullText.indexOf('`<');
+        if (iTestTag !== (iOpenTag - 1)) {
+          isEscapedHtmlTag = false;
+          break;
+        }
+        iTestTag = fullText.indexOf('>`')
+        if (iTestTag !== iCloseTag) {
+          isEscapedHtmlTag = false;
+          break;
+        }
+        if ((iCloseTag + 2) > fullText.length) {
+          break;
+        }
+        fullText = fullText.substring(iCloseTag + 2, fullText.length)
+      }
+
+      if (commentRange.kind === ts.SyntaxKind.MultiLineCommentTrivia && !isEscapedHtmlTag) {
+        this.addFailureAt(commentRange.pos, commentRange.end - commentRange.pos, ERROR_MESSAGE);
+      }
+    });
+  }
+}
+
+exports.Rule = Rule;

tslint.json

@@ -28,6 +28,7 @@
     "no-unused-expression": true,
     "no-var-keyword": true,
     "no-exposed-todo": true,
+    "no-unescaped-html-tag": true,
     "no-debugger": true,
     "no-unused-variable": [true, {"ignore-pattern": "^_"}],
     "no-rxjs-patch-imports": [