Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/mdl-ext/src/demo/include/_drawer.html b/node_modules/mdl-ext/src/demo/include/_drawer.html
new file mode 100644
index 0000000..b6bafd4
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/include/_drawer.html
@@ -0,0 +1,81 @@
+<style>
+ /* Ugly CSS! Only for demo. */
+
+ #demo-drawer-accordion {
+ height: 100%;
+ }
+
+ #demo-drawer-accordion .mdlext-accordion__tab {
+ height: 64px;
+ min-height: 64px;
+ min-width: 64px;
+ padding-left: 16px;
+ }
+
+ .is-small-screen #demo-drawer-accordion .mdlext-accordion__tab {
+ height: 56px;
+ min-height: 56px;
+ min-width: 56px;
+ }
+
+ #demo-drawer-accordion .mdlext-accordion__tabpanel,
+ #demo-drawer-accordion .mdlext-accordion__tabpanel nav {
+ padding: 0;
+ }
+
+ #demo-drawer-accordion .mdlext-accordion__tabpanel .mdl-navigation__link {
+ color: rgba(255, 255, 255, 0.87);
+ }
+
+ #demo-drawer-accordion .mdlext-accordion__tabpanel .mdl-navigation__link:hover {
+ background-color: #212121;
+ }
+
+</style>
+
+
+<aside class="mdl-layout__drawer">
+
+ <ul id="demo-drawer-accordion"
+ class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect mdlext-js-animation-effect mdlext-dark-color-theme"
+ aria-multiselectable="false">
+
+ <li class="mdlext-accordion__panel">
+ <header class="mdlext-accordion__tab" aria-expanded="true">
+ <span class="mdlext-accordion__tab__caption">MDL Extensions</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel">
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="accordion.html">Accordion</a>
+ <a class="mdl-navigation__link" href="bordered-fields.html">Bordered Fields</a>
+ <a class="mdl-navigation__link" href="collapsible.html">Collapsible</a>
+ <a class="mdl-navigation__link" href="color-themes.html">Color Themes</a>
+ <a class="mdl-navigation__link" href="formatfield.html">Formatted Fields</a>
+ <a class="mdl-navigation__link" href="grid.html">Grid</a>
+ <a class="mdl-navigation__link" href="carousel.html">Image Carousel</a>
+ <a class="mdl-navigation__link" href="lightboard.html">Lightboard</a>
+ <a class="mdl-navigation__link" href="lightbox.html">Lightbox</a>
+ <a class="mdl-navigation__link" href="menu-button.html">Menu Button</a>
+ <a class="mdl-navigation__link" href="selectfield.html">Selectfield</a>
+ </nav>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel">
+ <header class="mdlext-accordion__tab">
+ <span class="mdlext-accordion__tab__caption">Sticky headers</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel">
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="sticky-header.html">Sticky Header I</a>
+ <a class="mdl-navigation__link" href="sticky-header-ii.html">Sticky Header II</a>
+ <a class="mdl-navigation__link" href="sticky-header-iii.html">Sticky Header III</a>
+ <a class="mdl-navigation__link" href="sticky-header-iv.html">Sticky Header IV</a>
+ <a class="mdl-navigation__link" href="sticky-header-v.html">Sticky Header V</a>
+ <a class="mdl-navigation__link" href="sticky-header-vi.html">Sticky Header VI</a>
+ </nav>
+ </section>
+ </li>
+ </ul>
+</aside>
diff --git a/node_modules/mdl-ext/src/demo/include/_head.html b/node_modules/mdl-ext/src/demo/include/_head.html
new file mode 100644
index 0000000..1f582ce
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/include/_head.html
@@ -0,0 +1,26 @@
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+<title>Material Design Lite Extensions</title>
+
+<!-- Fallback to homescreen for Chrome <39 on Android -->
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="application-name" content="Material Design Lite Extensions">
+<link rel="icon" sizes="192x192" href="./assets/android-desktop.png">
+
+<!-- Add to homescreen for Safari on iOS -->
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
+<meta name="apple-mobile-web-app-title" content="Material Design Lite Extensions">
+<link rel="apple-touch-icon" href="./assets/ios-desktop.png">
+
+<link rel="shortcut icon" href="./assets/favicon.png">
+
+<!-- styles -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+<link rel="stylesheet" href="styles/dialog-polyfill.css">
+<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="./styles/demo.css">
diff --git a/node_modules/mdl-ext/src/demo/include/_header-row.html b/node_modules/mdl-ext/src/demo/include/_header-row.html
new file mode 100644
index 0000000..4bd3add
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/include/_header-row.html
@@ -0,0 +1,24 @@
+<div class="mdl-layout__header-row">
+
+ <!-- Title -->
+ <span id="header-title" class="mdl-layout-title">Title goes here</span>
+
+ <!-- Add spacer, to align navigation to the right -->
+ <div class="mdl-layout-spacer"></div>
+
+ <label id="go-home" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
+ <a href="index.html">
+ <i class="material-icons">home</i>
+ </a>
+ </label>
+
+ <button id="header-menu" class="mdl-button mdl-js-button mdl-button--icon">
+ <i class="material-icons">more_vert</i>
+ </button>
+ <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="header-menu">
+ <li class="mdl-menu__item">Some Action</li>
+ <li class="mdl-menu__item">Another Action</li>
+ <li disabled class="mdl-menu__item">Disabled Action</li>
+ <li class="mdl-menu__item">Yet Another Action</li>
+ </ul>
+</div>
diff --git a/node_modules/mdl-ext/src/demo/include/_header.html b/node_modules/mdl-ext/src/demo/include/_header.html
new file mode 100644
index 0000000..b11f9bf
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/include/_header.html
@@ -0,0 +1,3 @@
+<header class="mdl-layout__header mdlext-layout__sticky-header mdlext-js-sticky-header">
+ <include src="include/_header-row.html"></include>
+</header>
diff --git a/node_modules/mdl-ext/src/demo/include/_index.html b/node_modules/mdl-ext/src/demo/include/_index.html
new file mode 100644
index 0000000..1945e28
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/include/_index.html
@@ -0,0 +1,54 @@
+<h5 class="mdlext-demo-header">mdl-ext</h5>
+<p>Material Design Lite Ext (MDLEXT).
+ Components built with the
+ <a href="https://github.com/google/material-design-lite">Google Material Design Lite</a>
+ framework.
+</p>
+
+<h3>Components provided</h3>
+
+<h4>Accordion</h4>
+<p>A WAI-ARIA friendly accordion component with vertcial or horizontal layout.</p>
+
+<h4>Bordered Fields</h4>
+<p>The Material Design Lite Ext (MDLEXT) bordered fieldscomponent demonstrates
+ how you can create your own theme of MDL text fields.
+</p>
+
+<h4>Collapsible</h4>
+<p>A collapsible is a component to mark expandable and collapsible regions.</p>
+
+<h4>Color Themes</h4>
+<p>MDL provides only one color theme. Many designs require more than one theme, e.g. a dark theme and a light theme.</p>
+
+<h4>Grid</h4>
+<p>A responsive grid based on element queries in favour of media queries.</p>
+
+<h4>Image Carousel</h4>
+<p>A responsive, WAI-ARIA friendly, image carousel.</p>
+
+<h4>Lightboard</h4>
+<p>A lightboard is a translucent surface illuminated from behind, used for
+ situations where a shape laid upon the surface needs to be seen with high contrast.
+ In the "old days" of photography photograpers used a lightboard to get a quick
+ view of, sorting and organizing their slides.
+</p>
+
+<h4>Lightbox</h4>
+<p>A lightbox displays an image filling the screen, and dimming out the rest of
+ the web page. It acts as a modal dialog using the <code><dialog></code>
+ element as a container for the lightbox.
+</p>
+
+<h4>Menu Button</h4>
+<p>A WAI-ARIA friendly menu button component/widget with roles, attributes and behavior in accordance with the
+ specification given in WAI-ARIA Authoring Practices, section 2.20.
+</p>
+
+<h4>Selectfield</h4>
+<p>The Material Design Lite Ext (MDLEXT) select field component is an enhanced version
+ of the standard [HTML <code><select></code> element.
+</p>
+
+<h4>Sticky Header</h4>
+<p>A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.</p>
diff --git a/node_modules/mdl-ext/src/demo/include/_interactive-body-filler.html b/node_modules/mdl-ext/src/demo/include/_interactive-body-filler.html
new file mode 100644
index 0000000..e8103c1
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/include/_interactive-body-filler.html
@@ -0,0 +1,52 @@
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Sticky Header';
+ }
+ });
+
+ var btn = document.querySelector('#a-button');
+ btn.addEventListener('click', function() {
+
+ var content = document.querySelector('.mdl-layout__content');
+ content.insertAdjacentHTML('beforeend',
+ '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor lorem eu faucibus aliquet. ' +
+ 'In vehicula risus turpis, ut dictum ante tristique et. Aenean ultricies sed urna ac condimentum. ' +
+ 'Vivamus nisl tortor, ultricies at aliquam nec, semper at purus. Duis purus tortor, laoreet eget ante a, ' +
+ 'rhoncus vulputate lorem. Pellentesque id enim ut massa posuere vestibulum sit amet eget elit. Nulla quis ' +
+ 'euismod massa, id varius dui. Ut congue urna non ipsum placerat rhoncus. Curabitur a sollicitudin diam. ' +
+ 'Donec id lectus eleifend, blandit magna a, mattis turpis. Fusce non tellus pulvinar, finibus dui ac, ' +
+ 'porttitor ante. Vestibulum et commodo purus, et tincidunt nulla. Suspendisse blandit sodales est, nec ' +
+ 'luctus sem sollicitudin in. Etiam libero tellus, porttitor sit amet velit a, commodo sodales neque.</p>' +
+ '<p>Maecenas id sodales lacus, eu ullamcorper nibh. Sed posuere consectetur nunc nec dapibus. Nam tristique ' +
+ 'ex vel urna dapibus luctus. Phasellus eget mi ac tortor aliquet auctor non vitae risus. Cum sociis natoque ' +
+ 'penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec et egestas elit. Sed id lorem enim.' +
+ 'Aliquam maximus enim sed tincidunt pretium.</p>' +
+ '<p>Phasellus dictum, leo vel bibendum efficitur, mauris metus volutpat magna, at pharetra libero dolor id ' +
+ 'tellus. Mauris convallis tempus libero, sit amet suscipit massa maximus a. Duis ut dignissim nulla, nec ' +
+ 'gravida purus. Proin eget erat justo. Phasellus congue sapien eleifend sapien mollis, nec molestie eros ' +
+ 'efficitur. Pellentesque et diam at risus ultrices pharetra nec in augue. Phasellus vestibulum, lacus a ' +
+ 'dictum vulputate, mauris nisi dictum massa, in venenatis felis sapien a nunc. Integer mi tellus, imperdiet ' +
+ 'vel dignissim sed, fringilla ut urna.</p>' +
+ '<p>Suspendisse potenti. Pellentesque eget suscipit orci, at tempor est. Cras sed sollicitudin nunc. Donec ' +
+ 'convallis, arcu a euismod cursus, arcu odio pharetra lectus, vitae feugiat diam massa vestibulum metus. In ' +
+ 'odio tellus, consectetur eget est et, vehicula hendrerit dolor. Ut ultrices nulla tellus, sit amet ' +
+ 'consectetur dolor aliquet quis. Etiam non fermentum dolor.</p>' +
+ '<p>Donec accumsan risus in lectus sollicitudin ' +
+ 'vulputate. Praesent condimentum a leo at interdum. Donec ' +
+ 'pharetra congue erat a accumsan. Aliquam gravida ' +
+ 'lobortis mi, id elementum sapien ultrices vel. ' +
+ 'Pellentesque habitant morbi tristique senectus et ' +
+ 'netus et malesuada fames ac turpis egestas. Proin ' +
+ 'consequat enim orci, nec blandit lorem luctus ut. ' +
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
+ 'Etiam pretium nunc non metus gravida, nec tincidunt ' +
+ 'tortor volutpat. Aliquam erat volutpat. Curabitur ' +
+ 'varius purus ac auctor pharetra.</p>');
+ });
+
+ }());
+</script>
diff --git a/node_modules/mdl-ext/src/demo/include/_scripts.html b/node_modules/mdl-ext/src/demo/include/_scripts.html
new file mode 100644
index 0000000..97011e6
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/include/_scripts.html
@@ -0,0 +1,5 @@
+<script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
+<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6"></script>
+<script src="scripts/eq.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="https://code.getmdl.io/1.2.1/material.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>