Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/dist/components/dialog/index.html b/node_modules/material-design-lite/dist/components/dialog/index.html
new file mode 100644
index 0000000..0434845
--- /dev/null
+++ b/node_modules/material-design-lite/dist/components/dialog/index.html
@@ -0,0 +1,155 @@
+
+
+
+<h2 id="introduction">Introduction</h2>
+<p>The Material Design Lite (MDL) <strong>dialog</strong> component allows for verification of
+user actions, simple data input, and alerts to provide extra information to users.</p>
+<h2 id="basic-usage">Basic Usage</h2>
+<p>To use the dialog component, you must be using a browser that supports the <a href="http://www.w3.org/TR/2013/CR-html5-20130806/interactive-elements.html#the-dialog-element">dialog element</a>.
+Only Chrome and Opera have native support at the time of writing.
+For other browsers you will need to include the <a href="https://github.com/GoogleChrome/dialog-polyfill">dialog polyfill</a> or create your own.</p>
+<p>Once you have dialog support create a dialog element.
+The element when using the polyfill <strong>must</strong> be a child of the <code>body</code> element.
+Within that container, add a content element with the class <code>mdl-dialog__content</code>.
+Add you content, then create an action container with the class <code>mdl-dialog__actions</code>.
+Finally for the markup, add your buttons within this container for triggering dialog functions.</p>
+<p>Keep in mind, the order is automatically reversed for actions.
+Material Design requires that the primary (confirmation) action be displayed last.
+So, the first action you create will appear last on the action bar.
+This allows for more natural coding and tab ordering while following the specification.</p>
+<p>Remember to add the event handlers for your action items.
+After your dialog markup is created, add the event listeners to the page to trigger the dialog to show.</p>
+<p>For example:</p>
+<pre><code class="lang-javascript"> var button = document.querySelector('button');
+ var dialog = document.querySelector('dialog');
+ button.addEventListener('click', function() {
+ dialog.showModal();
+ /* Or dialog.show(); to show the dialog without a backdrop. */
+ });
+</code></pre>
+<h2 id="examples">Examples</h2>
+<h3 id="simple-dialog">Simple Dialog</h3>
+<p>See this example live in <a href="http://codepen.io/Garbee/full/EPoaMj/">codepen</a>.</p>
+<pre><code class="lang-html"><body>
+ <button id="show-dialog" type="button" class="mdl-button">Show Dialog</button>
+ <dialog class="mdl-dialog">
+ <h4 class="mdl-dialog__title">Allow data collection?</h4>
+ <div class="mdl-dialog__content">
+ <p>
+ Allowing us to collect data will let us get you the information you want faster.
+ </p>
+ </div>
+ <div class="mdl-dialog__actions">
+ <button type="button" class="mdl-button">Agree</button>
+ <button type="button" class="mdl-button close">Disagree</button>
+ </div>
+ </dialog>
+ <script>
+ var dialog = document.querySelector('dialog');
+ var showDialogButton = document.querySelector('#show-dialog');
+ if (! dialog.showModal) {
+ dialogPolyfill.registerDialog(dialog);
+ }
+ showDialogButton.addEventListener('click', function() {
+ dialog.showModal();
+ });
+ dialog.querySelector('.close').addEventListener('click', function() {
+ dialog.close();
+ });
+ </script>
+</body>
+</code></pre>
+<h3 id="dialog-with-full-width-actions">Dialog with full width actions</h3>
+<p>See this example live in <a href="http://codepen.io/Garbee/full/JGMowG/">codepen</a>.</p>
+<pre><code class="lang-html"><body>
+ <button type="button" class="mdl-button show-modal">Show Modal</button>
+ <dialog class="mdl-dialog">
+ <div class="mdl-dialog__content">
+ <p>
+ Allow this site to collect usage data to improve your experience?
+ </p>
+ </div>
+ <div class="mdl-dialog__actions mdl-dialog__actions--full-width">
+ <button type="button" class="mdl-button">Agree</button>
+ <button type="button" class="mdl-button close">Disagree</button>
+ </div>
+ </dialog>
+ <script>
+ var dialog = document.querySelector('dialog');
+ var showModalButton = document.querySelector('.show-modal');
+ if (! dialog.showModal) {
+ dialogPolyfill.registerDialog(dialog);
+ }
+ showModalButton.addEventListener('click', function() {
+ dialog.showModal();
+ });
+ dialog.querySelector('.close').addEventListener('click', function() {
+ dialog.close();
+ });
+ </script>
+</body>
+</code></pre>
+<h2 id="css-classes">CSS Classes</h2>
+<h3 id="blocks">Blocks</h3>
+<table>
+<thead>
+<tr>
+<th>MDL Class</th>
+<th>Effect</th>
+<th>Remarks</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>mdl-dialog</code></td>
+<td>Defines the container of the dialog component.</td>
+<td>Required on dialog container.</td>
+</tr>
+</tbody>
+</table>
+<h3 id="elements">Elements</h3>
+<table>
+<thead>
+<tr>
+<th>MDL Class</th>
+<th>Effect</th>
+<th>Remarks</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>mdl-dialog__title</code></td>
+<td>Defines the title container in the dialog.</td>
+<td>Optional on title container.</td>
+</tr>
+<tr>
+<td><code>mdl-dialog__content</code></td>
+<td>Defines the content container of the dialog.</td>
+<td>Required on content container.</td>
+</tr>
+<tr>
+<td><code>mdl-dialog__actions</code></td>
+<td>Defines the actions container in the dialog.</td>
+<td>Required on action container.</td>
+</tr>
+</tbody>
+</table>
+<h3 id="modifiers">Modifiers</h3>
+<table>
+<thead>
+<tr>
+<th>MDL Class</th>
+<th>Effect</th>
+<th>Remarks</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>mdl-dialog__actions--full-width</code></td>
+<td>Modifies the actions to each take the full width of the container. This makes each take their own line.</td>
+<td>Optional on action container.</td>
+</tr>
+</tbody>
+</table>
+
+